CODEWITHSUNDEEP
htmlcssmenu
hgolov
hgolov

Reputation: 722

Last menu item in CSS menu falling to next line

Thank you for taking the time to look at my question. I am working on the following site:

http://lighting-originals.myshopify.com/pages/contact-us/

As you can see, there is a menu on the top of the page made up of some items with drop downs, some without. For some reason, the last menu item falls to the next line. It does not seem to make a difference which item I put last or whether or not it has a drop down.

Does anyone have any ideas as to how I can fix this?

Thank you!

Upvotes: 0

Views: 804

Answers (2)

PSL
PSL

Reputation: 123739

Remove relative position on the following style:-

#top-menu li.last a {
border: none;
border-radius: 0 4px 4px 0;
position: relative;  //Remove this
right: 295px;
top: 34px;
}

Your last li and its div are in the appropriate place but positioning of a inside the div wraps it down. It should work with just the removal of position from the above style.

This causes the followng Div to wrap down.

<div class="has-dropdown">
              <a href="/pages/brands" class="clearfix">
                <span class="nav-label">Shop By Brand</span>
                <span class="nav-arrow" style="top: 16px;"></span>
              </a>
              <ul style="top: 37px; display: none;">

                <li><a href="/collections/elk">Elk</a></li>

              </ul>
            </div>

Upvotes: 1

Manish Sharma
Manish Sharma

Reputation: 1720

style.css line no. 266 update it

#top-menu li.last a {
border: none;
border-radius: 0 4px 4px 0;
position: relative;
right: 295px;
top: 34px;
}

updated code

#top-menu li.last a {
    border: none;    
    }

Upvotes: 2

Related Questions