5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

How can the bar menu on Wordpress be extended to the margins?

by Adorer
4 replies
  • WEB DESIGN
    • |
Hello everyone,

I wonder if someone can assist me with a little problem I am having. On this site www.philosophyonline.net I want the menu bar extended to the margins and for some reason the person that is working on this from ODesk is unable to do it.

Can the bar be made bigger to fill up the space or simply can the margins all together be eliminated on both sides?

Thank you. I await a response and thank you all in advance for your time and assistance.
#bar #extended #margins #menu #wordpress
  • Profile picture of the author David V
    This will fix your issue Adorer.


    First eliminate these:
    <div class="nav_left"></div>
    <div class="nav_right"></div>

    Now go to your style.css and go to line 462 and you'll see this:
    HTML Code:
    .navigation {
width: 1070px;
height: auto;
margin-left: 20px;
}
    Change it to this:
    HTML Code:
    .navigation {
width: 100%;
height: auto;
}
    Now to to line 464 and you'll see this:
    HTML Code:
    .nav_middle {
width: 1040px;
height: 41px;
background: url(images/nav_middle.png) repeat-x 0 -1px;
float: left;
}
    Change it to this:
    HTML Code:
    .nav_middle {
width: 100%;
height: 41px;
background: url(images/nav_middle.png) repeat-x 0 -1px;
float: left;
}
    Go to line 465 and you'll see this:
    HTML Code:
    .nav {
width: 600px;
height: 41px;
float: left;
}
    Change it to this:
    HTML Code:
    .nav {
width: 600px;
height: 41px;
float: left;
margin-left: 12px
}
    The margin will line your nav back up with the edge of the pic.

    Now to fix the social icons go to line and you'll see this:
    HTML Code:
    .social_icons {
width: 192px;
height: 31px;
float: right;
padding: 5px;
}
    Change it to this:
    HTML Code:
    .social_icons {
width: 192px;
height: 31px;
float: right;
padding: 5px;
margin-right: 12px;
}
    You can test this out fast without making changes first if you want by using firebug in firefox or developer tools in chrome.
    {{ DiscussionBoard.errors[7606816].message }}
    • Profile picture of the author Adorer
      David V,

      Thank you very much for you help. I appreciate it. You are a great asset to this forum and forum community. I am very grateful. I was surprised to find the solution had been offered. Thanks.

      ***

      I managed to get in the control panel (file manager). :p What do I click there to get to where I try those changes?

      I have been waiting for this job for a month now and I am a little frustrated. I want to go in there and do it myself. (I also need to come up with a system to work with people in a different time zone. But, that's for another thread.)
      {{ DiscussionBoard.errors[7607801].message }}
      • Profile picture of the author David V
        Originally Posted by Adorer View Post

        David V,
        I managed to get in the control panel (file manager). :p What do I click there to get to where I try those changes?
        If your in the file manager (cpanel I assume) you will navigate into your theme folder and open your css stylesheet (I think yours was style.css).
        Make the changes outlined.

        Can you FTP?
        It would be faster to just download the style.css to your desktop, make the changes (and a backup copy) then upload back to server.

        You can also just make the changes in the WP admin area under the appearance/editor although I am not a fan of theme building/modifications inside the admin area. (you always want to backup before changing anything).

        If you have trouble, send me the stylesheet or ftp info and I'll change it for you.

        David
        {{ DiscussionBoard.errors[7607887].message }}
        • Profile picture of the author Adorer
          Thank you David V for fixing the bar menu.
          {{ DiscussionBoard.errors[7611842].message }}

Trending Topics