Spacing in my top page navigation

  • I’m using the PrimePress theme that a friend has edited to move the tabs for my pages under the header instead of above.

    Everything was fine until I wanted to add a 6th tab. Instead of spacing it evenly across the bar it created a second row which cuts off the top of my wide sidebar and just looks crappy.

    I’m not sure where to start in terms of finding the code or what/how to change. Any information you can offer is greatly appreciated.

    Edited to Add: Oops, my link: https://theorganicsister.com

    P.S. I’m also interested in changing the font and sizing of the text but haven’t been able to manage it yet without also cutting off that sidebar or the main column.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Heres what you have to do:

    1)Open up your style.css file.
    2)Find this code

    ul.menu li{float:left; margin:0 0 0 100px; background:#fff; font-color: #333; font-size:11px; font-weight:bold; line-height:1;}

    3)Edit this particular one margin:0 0 0 100px
    4)Only edit the 100px value to something between 50px-90px(not more than 90px) according to your liking.

    This should work.But do remember that if you use a large margin of 90px for example, it will cause the same problem if you add another menu the next time. ??

    I guess a value of 80 would work perfectly for now.It wont work if you decide to add another tab.

    Thread Starter TheOrganicSister

    (@theorganicsister)

    No luck. I changed it to 50 and it didn’t do a thing. Here’s the whole main menu, if this helps…

    `
    /*—–main-menu*/
    ul.menu{position:absolute; top:293px; left:5px; padding:0 0 0; text-transform:lowercase;}
    ul.menu li{float:left; margin:0 0 0 50px; background:#fff; font-color: #333; font-size:11px; font-weight:bold; line-height:1;}
    ul.menu li a{display:block; background-color:#fff; padding:5px 10px; color:#555}
    ul.menu li a:hover{text-decoration:none; background:#C6697C; color:#fff}
    ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover{color:#0070CF; background:#fff;}

    .menu {
    background: #ffffff;
    width: 940px;
    padding: 2px 10px 2px 10px;
    right:0; }
    ‘

    Thread Starter TheOrganicSister

    (@theorganicsister)

    Aaah, nevermind. It seems to be working now (had to refresh a few times).

    Is there any way to make it “relative” so that I don’t have to manually change it and it automatically spaces it out evenly?

    And my next Q would be how do I change the font and size of the text without encroaching on the columns below?

    Here’s what you can do to make it relative..Remove the magin,i.e the whole margin:0 0 0 100px area . Replace it with padding: 0 10px 0; The value of 10px can be changed to whatever you like.Just fiddle with it to your liking.I’ll have to check it out for the font size thing…Will let you know if I get something..got something to work on..

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Spacing in my top page navigation’ is closed to new replies.