Home>Support>Child Theme breaks menus in vantage premium

Child Theme breaks menus in vantage premium

By nathan Delsignore, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

I am attempting to create a child theme for my vantage premium, i am needing to add some files to the functions otherwise i would just use the custom css. i used a ready made zip file child theme from another support post and it breaks my menus, i would like to update to 2.3 but have made changes to the functions.
i tried creating a child theme but it kept saying template missing.
any help would be appreciated, also is there there anyway easy way to add a second menu to the bottom of each page, mainly for mobile users so they don’t have to scroll all the way to the top!
Thanks so much!

URL: http://dev.netrsr.com

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hi Nathan

    Here is a vanilla child theme you can get going with:

    https://siteorigin.com/wp-content/uploads/2015/01/vantage-child-vanilla-enqueue.zip

    That should work out the box. If it can’t find the parent style.css file please check that your parent folder is named “vantage”.

    If you insert a custom menu widget into the footer, the following inserted under Appearance > Custom CSS will make it horizontal:

    /* 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;
}
  2. 9 years, 7 months ago nathan Delsignore

    Thanks for the reply Andrew, i had pulled a vanilla child theme from a previous post, but for some reason your new one and the other breaks the main menu. if you look at the site dev.netrsr.com

  3. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    This is unfortunately an expected result of activating a child theme. You’ll need to redo Menu assignments and Customizer settings. The menu isn’t broken you just need to re-save your primary menu into the theme’s primary menu location.

    Hope that helps.

  4. 9 years, 7 months ago nathan Delsignore

    I don’t follow but i’ll just scrap the child theme i guess and just use the custom css to make smaller changes, as for putting a footer menu, identical to the main navigation, i need to use the function.php file. but that will be overwritten if i do any updates

  5. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    When you had the parent theme activated, at some point you went to Appearance > Menus, created a custom menu and saved it to the theme’s primary menu location. When you activate any new theme, including a child theme, that setting gets reset. All you have to do is go to Appearance > Menus, select your custom menu, scroll down, check the primary menu location to assign the menu to that location and click save.

  6. 9 years, 7 months ago nathan Delsignore

    HAH, i’m an idiot! Thanks…

  7. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Super, glad that helped. No problem at all, very common question after activating a child theme.

  8. 9 years, 7 months ago nathan Delsignore

    wish i had seen it in the forums, hate asking questions that have been answered, must have just searched wrong. any thoughts on a secondary menu before the footer?

  9. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    No problem.

    Ok so you didn’t like my footer widget menu option :)

    I think I actually worked the duplicate menu question up earlier this week. I’ll try find it.

  10. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Here we go:

    https://siteorigin.com/wp-content/uploads/2015/02/vantage-child-footer-nav.zip

    That’s the child theme for it above.

    Here is thread, I go over the steps that I went through to build it.

    Thread: Secondary Nav Issues

  11. 9 years, 7 months ago nathan Delsignore

    Thanks Andrew! The menu seems to be there, but there seems to be no drop down menu

  12. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    I didn’t build any drop down styles into that one. Let me see what I can do quick.

  13. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    With the child theme activated, go to Appearance > Editor, edit style.css. Assuming you haven’t added any other styles, remove the styles there and replace them with:

    .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 ul ul {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  background: #464646;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99999;
/* Third Level Items */
}
.footer-navigation ul ul a {
  width: 200px;
  padding: 15px 20px;
}
.footer-navigation ul li {
  position: relative;
  /* Hovering over 2nd level items */
}
.footer-navigation ul ul li:hover > a {
  background: #00bcff;
  color: #ffffff;
}
.footer-navigation ul ul ul {
  left: 100%;
  top: 0;
  margin-left: 0;
}
.footer-navigation ul li:hover > ul {
  display: block;
}

.footer-navigation a {
  display: block;
  text-decoration: none;
  color: #e2e2e2;
  font-weight: bold;
}
  14. 9 years, 7 months ago nathan Delsignore

    didn’t seem to do it, i originally had the css from your post in there and replaced it with the above, i’m assuming the style.css in the child theme has the styles for the footer so i don’t need the extra css. i replaced the custom css with the above. still no drop down menu, i feel bad to continue asking for help! it’s not even really an issue with your theme! but i really do appreciate it!

  15. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    No problem.

    Custom CSS is fine, in that case go to style.css and remove the selectors I have there. No sense in duplicating them.

    Please go to Appearance > Editor and edit /parts/footer.php, find this line:

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

    See where is says depth’ => 1, change that number. 3 or 4.

    Thanks

  16. 9 years, 7 months ago nathan Delsignore

    That seems to function 99%, just doesn’t drop down fully goes to a long horizontal menu, could that have something to do with the layout of the page not allowing to move down to the edge of the browser window?

    Thanks andrew you have been awesome

  17. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Did you by any chance leave the original CSS I sent in Custom CSS? If you scroll back to the top you’ll see that first snippet I sent. That shouldn’t still be in play.

  18. 9 years, 7 months ago nathan Delsignore

    this code

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

    i removed that and is did not resolve the problem

  19. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    No, not that CSS. I’ve re-worked this. The new final product is up here:

    https://siteorigin.com/wp-content/uploads/2015/02/vantage-child-footer-nav-02.zip

    The slightly re-worked Custom CSS is:

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

.layout-full #colophon {
  padding-top: 0;
}
#footer-widgets .widget {
  margin-top: 35px;
}
.footer-navigation-wrapper {
  margin: 0 -35px;
  background: #343538;
}
.footer-navigation {
  font-size: 13px;
  position: relative;
}
.footer-navigation [class^="fa fa-"] {
  display: inline-block;
  margin-right: 15px;
  font-size: 16px;
  line-height: 0.5em;
  color: #cccccc;
}
.footer-navigation a:hover [class^="fa fa-"] {
  color: #ffffff;
}
.footer-navigation ul {
  margin: 0;
  list-style: none;
  margin: 0;
  padding-left: 0;
  zoom: 1;
  /* Second level menu items */
}
.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 ul ul {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  background: #464646;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99999;
  /* Third Level Items */
}
.footer-navigation ul ul a {
  width: 220px;
  padding: 15px 20px;
}
.footer-navigation ul ul li {
  position: relative;
  /* Hovering over 2nd level items */
}
.footer-navigation ul ul li:hover > a {
  background: #00bcff;
  color: #ffffff;
}
.footer-navigation ul ul ul {
  left: 100%;
  top: 0;
  margin-left: 0;
}
.footer-navigation ul li:hover > ul {
  display: block;
}
.footer-navigation a {
  display: block;
  text-decoration: none;
  color: #e2e2e2;
  font-weight: bold;
}

    The slightly re-worked /parts/footer.php file looks like this:

    <?php
/**
 * Part Name: Default Footer
 */
?>
<footer id="colophon" class="site-footer" role="contentinfo">

	<div class="footer-navigation-wrapper">
		<div class="full-container">
			<?php wp_nav_menu( array( 'theme_location' => 'footer', 'container_class' => 'footer-navigation' ) ); ?>	
		</div>
	</div>

	<div id="footer-widgets" class="full-container">
		<?php dynamic_sidebar( 'sidebar-footer' ) ?>
	</div><!-- #footer-widgets -->

	<?php $site_info_text = apply_filters('vantage_site_info', siteorigin_setting('general_site_info_text') ); if( !empty($site_info_text) ) : ?>
		<div id="site-info">
			<?php echo wp_kses_post($site_info_text) ?>
		</div><!-- #site-info -->
	<?php endif; ?>

	<?php echo apply_filters( 'vantage_footer_attribution', '<div id="theme-attribution">' . sprintf( __('A <a href="%s">SiteOrigin</a> Theme', 'vantage'), 'http://siteorigin.com') . '</div>' ) ?>

</footer><!-- #colophon .site-footer -->
  20. 9 years, 7 months ago nathan Delsignore

    Thank you so much, works great for our needs! I very much appreciate it! You should have a tip jar attached to the support pages!

    Thanks again!

    -Nathan

  21. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Super, really glad that did the trick for you.

    We appreciate all the support.

    Cheers!

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More