nav bar not to span full length of page.

  • jeellison

    (@jeellison)


    11 years ago

    Hello Everyone.

    Please see https://test.tech5media.com/ I have changed the css in a child these to make the nav bar menus appear on the right by using :

    .nav-menu{
    text-align:right;
    background-color:#FF9;
    padding-left: 333px;

    BUT

    the main bar spans the whole page, I would like the left side of the bar not to be there ie the yellow bar starts just before the first home menu button.

    I hope someone understands this and can give me some css please.

    Thanks
    Alex

Viewing 3 replies - 1 through 3 (of 3 total)
  • wen.wainwright

    (@wenwainwright)

    You’re really not supposed to ask CSS questions on here but I’m procrastinating…Right now your yellow nav bar is .nav-menu. Yes, you added the padding but the padding is pushing the content inside the nav bar to the right. Padding pushes things inside elements around the inside vs. margins which are spaces outside an element. So you could change the max-width of the nav.menu to 400px or so and then it won’t be so long.

    You have your green box in the #main.wrapper…which is a different place than where your nav.menu is (it’s in the header#masthead.site-header). Since they are separate areas they have separate spaces and boundaries.

    I think you have more of a design issue than a CSS issue. (I’m more of a front-end person than a back-end person). If there is enough length for the whole green box then you would either have to create another box for something under the yellow nav bar or there would be a large white space, does that make sense?

    My design advice is to create a widget area in your header so that you can display the menu in the green header image – not through photoshop or something like that, but in a new widgetized area so the menu will display over it. You can use white or yellow on the green and it will be very legible. Then divide your content into two columns, or a column and a sidebar, and the top of the green box will line up with the top of the content text.

    Also, since I was poking around your site, you have a background color that shows up under the green box. It’s from here:

    .widget-area
{
  background-color: #fbe2a8;
}

    Let me know if that helps at all.

    Thread Starter jeellison

    (@jeellison)

    Not reallu sure what you mean about the green space, but I really do appreciate your help. This is 2012 wordpress theme by the way.

    So I added the max width like you said to make it smaller which is great but how do I get the whole thing now onto the right and also keep the tiny grey lines from moving when I pad the text.

    https://test.tech5media.com/?page_id=10

    So nearly there ??
    Thanks again
    Alex

    wen.wainwright

    (@wenwainwright)

    It’s ok, I use 2012 still.

    I just looked at your site and I’m not sure you are still having issues with the gray lines since they look fine to me. If you are having issues maybe reexplain them, if you have already fixed it then great! If everything is fixed you should mark this post as resolved ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘nav bar not to span full length of page.’ is closed to new replies.