Secondary Nav Issues

Hi Larry

We’d love to roll this out for you. It’s unfortunately more involved than we’re able to handle in the support department at the moment. What I do have though is a CSS snippet that’ll convert a custom menu widget from a vertical list to a horizontal list. This is the second iteration of this snippet:

/* Vantage Horizontal Footer Menu */

#footer-widgets .widget.widget_nav_menu ul {
text-align: center;
}
#footer-widgets .widget.widget_nav_menu li {
display: inline-block;
float: none;
margin-right: 16px;
}
#footer-widgets .widget.widget_nav_menu li:before {
content: "\0007C";
font-family: FontAwesome;
margin-right: 16px;
}
#footer-widgets .widget.widget_nav_menu li:first-of-type:before {
content: none;
margin-right: 0;
}
#footer-widgets .widget.widget_nav_menu li:last-of-type {
margin-right: 0;
}

Other widgets should then full under the custom menu widget.

Perhaps give this a go, hopefully it’ll be good enough for what you’re after here.

Thanks for the further info.

Look and feel aside it’s possible to make the CSS I sent specific so that it only applies to the footer widget area OR so that it only applies to the first menu widget it sees in the footer. Let me know if you’d like me to adjust the CSS to accommodate for footer specificity.

If you’re keen to try again, here is what I’d do:

The main menu duplicates itself in the process of being sticky. I wouldn’t copy the main menu as it stands right now. So starting from scratch:

Create a new menu in the functions.php file of the child theme:

/**
 * Register a new menu.
 */

add_action( 'after_setup_theme', 'vantage_child_register_menu' );
function vantage_child_register_menu() {
  register_nav_menu( 'footer', 'Footer Menu' );
}

Next let’s create a “parts” folder in the child theme and copy footer.php from the parent theme /parts/ folder to the same location in the child theme.

On line 7 of footer.php right after this line:

<footer id="colophon" class="site-footer" role="contentinfo">

Let’s introduce our new menu:

<?php wp_nav_menu( array( 'theme_location' => 'footer', 'depth' => 1, 'container_class' => 'footer-menu', ) ); ?>

Now let’s go to Appearance > Custom CSS or your child theme’s style.css and target this menu:

/* Footer Menu
----------------------------------------------- */

.layout-full #colophon {
  padding-top: 0;
}

.footer-navigation {
  margin: 0 -35px 30px;
  background: #343538;
  font-size: 13px;
  position: relative;
}

.footer-navigation ul {
  list-style: none;
  margin: 0 auto;
  padding-left: 0;
  zoom: 1;
  width: 1080px;
}

.footer-navigation ul:before {
  content: '';
  display: block;
}

.footer-navigation ul:after {
  content: '';
  display: table;
  clear: both;
}

.footer-navigation ul li {
  display: block;
  position: relative;
  float: left;
}

.footer-navigation ul li:hover > a {
  background: #00bcff;
  color: #FFFFFF;
}

.footer-navigation ul li a {
  padding: 20px 35px;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.footer-navigation ul li a,
.footer-navigation ul li a > * {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.footer-navigation a {
  display: block;
  text-decoration: none;
  color: #e2e2e2;
  font-weight: bold;
}

Edit the CSS as required.

You can target the second selector in my CSS: .footer-navigation. Give that a try. So that selector is full width, only the list inside of it is constrained.