move main navigation to banner

  • Resolved anoctave

    (@anoctave)


    11 years, 9 months ago

    I want to move the main navigation to the banner. In the previous support topic you said to move the navigation to the banner.

    Right now, I’ve suppressed the visibility of the nav menu with a display: none;. (Question: does the display: none; work for all iterations of the menu? or do I have to suppress the display on all ul levels?)

    Could you show the exact place where the <nav> ... </nav> should go. I do not know either html5 or php so I’m afraid I find the code in header.php somewhat confusing.

    Alternatively, I could go with a custom menu in the banner widget. If I do that, then I suppose I would have to suppress the <nav>...</nav> altogether.

    Your help is most appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    You’ll need to move these following lines, in header.php…

    <nav id="site-navigation" class="main-navigation" role="navigation">
   <h3 class="menu-toggle assistive-text"><?php _e( 'Menu', 'quark' ); ?></h3>
   <div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'quark' ); ?>"><?php _e( 'Skip to content', 'quark' ); ?></a></div>
   <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav> <!-- /.site-navigation.main-navigation -->

    so that they sit in between these opening and closing divs for the banner…

    <div id="bannercontainer">
   <div class="banner row clearfix">
      <nav id="site-navigation" class="main-navigation" role="navigation">
         <h3 class="menu-toggle assistive-text"><?php _e( 'Menu', 'quark' ); ?></h3>
         <div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'quark' ); ?>"><?php _e( 'Skip to content', 'quark' ); ?></a></div>
         <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
      </nav> <!-- /.site-navigation.main-navigation -->
   </div> <!-- /.banner.row -->
</div> <!-- /#bannercontainer -->

    (In the above example, I’ve remove the existing code for the Front Page Widgets. If you still want the widgets, then obviously you’ll need to keep the existing code)

    Depending what background you’re using in the banner section, you may also need to change the menu styles/colours so you can see the menu properly. You can find these towards the bottom of the stylesheet (style.css).

    Hope this helps.

    Thread Starter anoctave

    (@anoctave)

    Thank you so much. The results worked but not quite as I imagined. I’m going to work with this a while and I’ll probably be back with questions.

    Can I tell you how much I appreciate the responsiveness I’ve seen on this theme’s support page. I’ve tried to edit several different themes always coming to a point that completely baffled me.

    This time I think I might make it through to the end. I’m an old CSS2 and earlier html person and the changes in html5 and css3 are kind of overwhelming.

    Thanks again.

    Theme Author Anthony Hortin

    (@ahortin)

    You’re welcome. Thanks for the kind words. Good luck with the rest of your theme ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘move main navigation to banner’ is closed to new replies.