Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
Like Tree3Likes
  • 2 Post By Andrew Yurlov
  • 1 Post By mzdesign

Thread: Making NavBar span full width of the body page. Any Help would be greatly appreciated

  1. #1
    Junior Member
    Join Date
    Mar 2015
    Location
    Southern California
    Posts
    12
    Member #
    46802
    Liked
    1 times

    Making NavBar span full width of the body page. Any Help would be greatly appreciated

    I'd like the Nav Bar to span the entire width of the content page. Currently it spans most of the width, leaving a few pixels of white space on either side (see photo below).

    Screen Shot 2015-03-01 at 2.32.42 PM.jpg

    I am using WP, and have created a child theme for twenty twelve. I changed a line of code below, adjusting the width from 100% to 110%. The result is halfway towards the desired goal, as the nav bar extends to the right but not the left. What i'm stuck with now is:

    Screen Shot 2015-03-01 at 2.37.03 PM.jpg

    Here is the code:

    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    border-bottom: 1px solid #EDEDED;
    border-top: 1px solid #EDEDED;
    display: inline-block;
    text-align: left;
    width: 110%;
    }

    I don't know if the fact that I have the text-aligned to left is affecting this or another part of my CSS is but I am fairly new to web design and any feedback would be awesome, Thank You.

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Set width back to 100% and try with:
    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    margin: 0;

  4. #3
    Junior Member
    Join Date
    Mar 2015
    Location
    Southern California
    Posts
    12
    Member #
    46802
    Liked
    1 times
    Quote Originally Posted by sasha_bolcina View Post
    Set width back to 100% and try with:
    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    margin: 0;
    Thank you for the prompt response Sasha, tried this with no success. Used the ! important tag as well and no luck. I am determined to figure this out as it can't be that difficult.

  5. #4
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    This should work

    Code:
    html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
    strong, sub, sup, tt, var, legend, fieldset {
    	margin: 0;
    	padding: 0;
    }
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  6. #5
    Junior Member
    Join Date
    Mar 2015
    Location
    Southern California
    Posts
    12
    Member #
    46802
    Liked
    1 times
    I did figure out a solution. The answer was on a WP forum. Basically I had to do this:

    .main-navigation {
    margin-top: 2.31429rem !important;
    text-align: center;
    width: 108.4%;
    margin: 0px -2.87514rem;

    }

    I am not exactly sure "why" it works, but do know that it works. If anyone doesn't mind explaining this, it would certainly help me and some others gain a conceptual understanding of this.

  7. #6
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    No clue why it works... Never even heard of such a solution but my thought is that if the fix is that extreme there has to be something else very wrong going on.
    sasha_bolcina and Vapr_Arts like this.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  8. #7
    Senior Member breno's Avatar
    Join Date
    Feb 2015
    Location
    Australia
    Posts
    138
    Member #
    41574
    Liked
    29 times
    Quote Originally Posted by mzdesign View Post
    I did figure out a solution. The answer was on a WP forum. Basically I had to do this:

    .main-navigation {
    margin-top: 2.31429rem !important;
    text-align: center;
    width: 108.4%;
    margin: 0px -2.87514rem;

    }

    I am not exactly sure "why" it works, but do know that it works. If anyone doesn't mind explaining this, it would certainly help me and some others gain a conceptual understanding of this.
    yeah that looks messed up, I wouldn't accept that in my work and...i'd be inclined to back up and fix what's causing it to have such extreme values. And it's not just a case of this:

    funny-picture-my-code-doesnt-work-i-have-no-idea-why.jpg

  9. #8
    Junior Member
    Join Date
    Mar 2015
    Location
    Southern California
    Posts
    12
    Member #
    46802
    Liked
    1 times
    I hear the both of you. Going to comment that part out and try to implement a solution that "I Understand".
    breno likes this.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:55 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com