WordPress.org

Forums

[resolved] Need to make top navigation bar go across entire site (20 posts)

  1. krissimmons
    Member
    Posted 4 years ago #

    My website is http://dev.wingsgroupllc.com.

    Right now, the top menu navigation bar is right centered so there is only room for so many buttons before it starts a second line.

    Instead, I need to edit the code so the navigation bar will go across the entire width of the site.

    Where do I edit this? If I can just find the code, I'm sure I can tweak it to make it work. I just can't find it!

    Thanks in advance for your help. I appreciate it very much

  2. esmi
    Forum Moderator
    Posted 4 years ago #

    You'd need to re-structure the theme so that the nav bar lies under the header - instead of next to it. This might requite changes in your theme's templates files as ell as your stylesheet.

  3. krissimmons
    Member
    Posted 4 years ago #

    Hmm. Any idea where to start?

    I've worked with themes before where the issue was the logo placement on the top left was designated for a space that overlapped where the nav bar would go.

    Then, by reducing the footprint for the logo area, the nav bar automatically positioned itself all the way to the left of the page.

    Does this sound familiar? Thanks again.

  4. esmi
    Forum Moderator
    Posted 4 years ago #

    Start with your theme's header.php file.

  5. oturia
    Member
    Posted 4 years ago #

    In your CSS, you have the header split into two sections:
    #top-left
    #top-right

    Each one of those div's are set at a fixed width and are floating left.

    You should look in the header file as esmi stated, find the code that starts with:

    <div id="top-navigation">
    And copy everything within and including that div and move it below the #top-right div content but while still within the #top div. You may also need to play with the clearing on that div and the margins after you've moved it below the top right div.

    Does that make sense?

  6. krissimmons
    Member
    Posted 4 years ago #

    Okay, that worked to widen out the navigation bar but now it's lower than I need it. How can I left justify it and bump it up so it's above the gray bar and below the logo? Thanks!

  7. oturia
    Member
    Posted 4 years ago #

    The stylesheet is giving that div 30pixels of padding on the top from when it used to need to sit below the search bar. Look in your css file for this:

    #top-navigation {
        padding: 30px 0 0;
    }

    And change the 30 to 0.

  8. krissimmons
    Member
    Posted 4 years ago #

    The stylesheet is giving that div 30pixels of padding on the top from when it used to need to sit below the search bar. Look in your css file for this:
    #top-navigation {
    padding: 30px 0 0;
    }
    And change the 30 to 0.

    I made that change but nothing happened. Is there another place I need to try in the code?

  9. oturia
    Member
    Posted 4 years ago #

    The logo is 98 pixels tall, and so is the div that's holding it (#top). But from the looks of the image, it could be cropped quite a bit.

    I would suggest cropping some of the bottom of the logo image to get it down to 60-70 pixels. Whatever the new height of the logo image is, change the CSS of that div to match it. Here is the current CSS for that Div:

    #top {
        float: left;
        height: 98px;
        padding-top: 6px;
        position: relative;
        width: 940px;
        z-index: 100;
    }

    Play with it a few different times and you'll get the right size.

  10. krissimmons
    Member
    Posted 4 years ago #

    Awesome. That works great.

    Now, I'd like to add a | symbol between each menu button on the top navigation bar. How can I do that so when I add or take away menu buttons in the future, the | symbol stays in tact?

    Thanks!

  11. oturia
    Member
    Posted 4 years ago #

    Are you listing these pages manually or are you using the list_pages function?

    Please post the code that falls between the <div id="top-navigation"></div> code.

  12. krissimmons
    Member
    Posted 4 years ago #

    Here you go:

    <div id="top-navigation">
    <?php wp_nav_menu( array(
    	'container'       => 'ul',
    	'menu_class'      => 'menu',
    	'menu_id'         => 'topnav',
    	'depth'           => 0,
    	'theme_location' => 'mainmenu'
    ));
    ?>
    </div><!-- end #top-navigation -->
    <div class="clear">
  13. oturia
    Member
    Posted 4 years ago #

    Try this:

    <div id="top-navigation">
    <?php wp_nav_menu( array(
    	'container'       => 'ul',
    	'menu_class'      => 'menu',
    	'menu_id'         => 'topnav',
    	'depth'           => 0,
    	'theme_location' => 'mainmenu',
    	'after' => ' | '
    ));
    ?>
    </div><!-- end #top-navigation -->
    <div class="clear">

    If that doesn't work, try this:

    <div id="top-navigation">
    <?php wp_nav_menu( array(
    	'container'       => 'ul',
    	'menu_class'      => 'menu',
    	'menu_id'         => 'topnav',
    	'depth'           => 0,
    	'theme_location' => 'mainmenu',
    	'link_after' => ' | '
    ));
    ?>
    </div><!-- end #top-navigation -->
    <div class="clear">
  14. krissimmons
    Member
    Posted 4 years ago #

    Awesome. The second version of code worked best but I had to go in and add a few spaces before the | symbol to make sure it spaced out correctly.

    The next question I have is how can I make the navigation menu items bold? My client wants them to stand out more but I'm not sure where to add the <b> code in the stylesheet.css or header.php file.

    Thanks again :)

  15. oturia
    Member
    Posted 4 years ago #

    Well, I wouldn't manually place strong tags in the html. It's better to adjust the stylesheet.

    However, the top navigation is using Cufon to generate a special font for the items in the navigation. You can still stylize cufon, if the font file that was uploaded included a bold version of the font.

    Did you manually install Cufon or did it come built into the theme?

  16. krissimmons
    Member
    Posted 4 years ago #

    The Cufon came built into the theme. How can I check if there is a bold option?

  17. oturia
    Member
    Posted 4 years ago #

    It's hard to tell unless you can read Javascript.

    Can you put up the URL to the demo of the theme you purchased?

  18. krissimmons
    Member
    Posted 4 years ago #

  19. oturia
    Member
    Posted 4 years ago #

    It does not include a bold version, it is using Quicksand Light and Quicksand Book. There is a Quicksand Bold Version, but you would need to download the font here, then go to the cufon font generator here, then add the JavaScript file it produces to the template directory "wp-content/themes/elegance/js/".

    Then, you'd have to figure out where the Cufon code is generated in this theme and alter the Cufon tags to change the #top-navigation li a to use the bold font instead of the Quicksand Light font.

    The theme author would be able to answer the question about where the code is being generated from, but you may want to at least check the header.php file first to see if it's there.

    The code you are looking for is:

    <script type="text/javascript">
    	 Cufon.replace('h1') ('h1 a') ('h2') ('h3') ('h4') ('h5') ('h6')  ('#box p') ('.text-styled') ('.desc') ('blockquote') ('#top-navigation li a', {
    	 hover: true
    });
    	Cufon.replace('#slider .bottom', { fontFamily: 'Quicksand Book' });
    	Cufon.replace('h2.entry-title', { fontFamily: 'Quicksand Book' });
    </script>

    When you find it, you would want to remove the #top-navigation li a bit, then add it as it's own line item at the bottom like this:

    Cufon.replace('#top-navigation li a', { fontFamily: 'Quicksand Bold' });

    Beyond that information, there's not a lot else we can do here. The theme author would be the next person to pick up the ball and help you find the correct place to edit the Cufon markup. Be sure to follow those other steps first so that he or she will need to do nothing more than tell you where to make the edits.

    Also, since we have left the realm of "Needing to make the top navigation go across the whole site" and into some other unrelated topics, I would mark this as resolved, attempt to follow the instructions above about Cufon then open another thread if you run into another issue.

    Good luck!!!

  20. krissimmons
    Member
    Posted 4 years ago #

    Awesome. Thanks so much for your help.

Topic Closed

This topic has been closed to new replies.

About this Topic