Submenu items lining up incorrectly

  • Resolved kylemcburnie

    (@kylemcburnie)


    13 years, 4 months ago

    Hey community!
    Recently started using wordpress, and I’m trying to set up my front page so that my logo is centered above my main menu bar – which I’m trying to get to span across the whole page.

    I managed to get my menu bar to span across the page with some research, mainly using padding. After that the submenu items wouldn’t stack vertically (spanned across the distance horizontally) so I put in a width parameter in the submenu and now they stack vertically again + line up with the parent menu, however they leave a blank white box beside them!

    Obviously the white box is a little distracting, I would love to get rid of it!

    I would greatly appreciate any help!

    (www.sdexpeditions.com)

Viewing 10 replies - 1 through 10 (of 10 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 4 months ago

    Hmm, there are some weird CSS styles going on here. Let’s start by cleaning those up.
    Remove:

    float: left;
position: relative;

    On .nav_main li li
    (added extra li to match only submenu list items).

    Then remove:

    width: 37%;
margin: 0px;
padding-left: 88px;

    On .nav_main li ul

    Thread Starter kylemcburnie

    (@kylemcburnie)

    13 years, 4 months ago

    Alright Andrew I removed those (when you said you added extra li to match only submenu items does that mean just remove those two lines from .nav_main li { ….} ?

    So now the menu is still centered however the submenu appears oddly on the page – somewhere down below and to the left side.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 4 months ago

    Okay, let’s proceed.
    Modify the top and left values to this;

    top: 0;
left: 0;

    On .nav_main li ul
    –
    Add;

    position: relative;

    On .nav_main
    –
    Add;

    float: left;

    On .nav_main li

    Thread Starter kylemcburnie

    (@kylemcburnie)

    13 years, 4 months ago

    Got it Andrew, now they appear un-stacked but on the menu bar

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 4 months ago

    Now add;

    float: none;

    To .nav_main li li
    (new style)

    I think you forgot to add position: relative; to the specified element. Let’s wait until you do.

    Thread Starter kylemcburnie

    (@kylemcburnie)

    13 years, 4 months ago

    Hey Andrew, I added the new style which stacks them!
    For the position: relative; I added it to the
    .nav_main { position:relative; margin:0;}

    is this incorrect?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 4 months ago

    My mistake, add it to .main_nav li.

    Thread Starter kylemcburnie

    (@kylemcburnie)

    13 years, 4 months ago

    Alright there we go

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 4 months ago

    Now you can mess around with the top and left values of .nav_main li ul to position your submenu where you want.

    Thread Starter kylemcburnie

    (@kylemcburnie)

    13 years, 4 months ago

    Thanks so much Andrew!

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

The topic ‘Submenu items lining up incorrectly’ is closed to new replies.