WordPress.org

1. ericporado
   Member
   Posted 1 year ago #

   As the title states, I need some help pointing me to how to widen the Navigation Bar. I tried doing some searching around the internet with no avail.

   I very much appreciate the help guys 'n gals!

2. Christine
   Moderator
   Posted 1 year ago #

   If you can provide a link to your site, we can help, but without anything.... we can't see much.

3. ericporado
   Member
   Posted 1 year ago #

   ericporado.com

   Thanks!

4. Christine
   Moderator
   Posted 1 year ago #

   So i'm looking at your site right now and the nav bar is pretty big? How much bigger do you want it to be?

5. ericporado
   Member
   Posted 1 year ago #

   I just need to add the "Categories" as one last menu and it wraps it around and starts a second line under "Home"

6. ericporado
   Member
   Posted 1 year ago #

   I want it to all be on one single line, instead of wrapping around. I think that makes sense lol

7. Christine
   Moderator
   Posted 1 year ago #

   On my Mac, it's all on a single line on both Safari and Firefox.

8. ericporado
   Member
   Posted 1 year ago #

   Right now it is...but I don't have "Categories" in the nav bar. I had to take it out because it wrapped around. If I add "Categories" to my nav bar, then it makes a second line and places itself under "home".

   I'm trying to widen the area I can place pages in, not necessarily the colored part of the nav bar (as it spans the site from left to right already)....just the area I can put headings. Here is an example of a nav bar with MUCH more than mine can hold in one line. http://www.veronicavaros.com I would like mine to hold more pages like that.

   Thanks so much Christine!

9. Christine
   Moderator
   Posted 1 year ago #

   All you need to do is reduced the amount of padding in between the menu items or make the whole page wider. Personally, I would get rid of the h2 in the nav. That's really not how headings should be used and then just make the fonts smaller.

10. ericporado
    Member
    Posted 1 year ago #

    How exactly do I reduce the padding?

11. Christine
    Moderator
    Posted 1 year ago #

    In the stylesheet you need to look at the styles for the menu.

    I can see this for example:

    #menu li {
    	padding:15px 50px 0px 0px;
    	float:left;
    	}

    Try the following:
    

    #menu li {
    	padding:15px 30px 0px 0px;
    	float:left;
    border:1px solid red;
    	}

    Reducing the padding on the right from 50px to 30px should decrease the space in the between the menu items. I also suggest that you put a red border around the menu items, just for testing purposes. When making changes in the css, these borders help you see what's going on. Just remove is when you are done.

Topic Closed

This topic has been closed to new replies.