Archived topic

Width of navigation when floating

5 replies · Started by Antwan on October 14, 2015

Viewing posts 1–6 of 6

October 14, 2015 at 8:26 am #144286

Hi there!

I have set a logo and the navigation should float to the right of it. So far so good.
The navigation is a Max mega-menu with two nav-items, one aligned left and the other to the right. When placed under the logo/header, the width of the mega-menu is 100%, as desired. But when floated to the right of the logo, the width shrinks back to just the sum of the two nav-items. Is there a way this can be fixed, preferably so that the content that pops up upon nav hover uses the full 100% of the grid-container?

Thanks in advance!

October 14, 2015 at 10:39 am #144320

Hi there,

Can you link me to your site?

Generally, HTML elements that float (left or right) will take on the width of their contents. This is because there's no way for the element to know how much room it has for the width between your logo and the edge of the container.

October 15, 2015 at 7:25 am #144571

Hi Tom,

The link is http://neu.stadtteilweb.de (warning; heavily under construction :).

Thanks in advance!

October 15, 2015 at 10:43 am #144638

You could try something like this..

@media (min-width: 769px) {
    .nav-float-right .main-navigation {
        width: 80%;
    }
}

You may have to adjust the width using some other media queries at certain screen sizes, but that should get you on your way :)

October 19, 2015 at 6:04 am #145612

Yep, that's it. Thanks for the pointer!

October 19, 2015 at 9:54 am #145671

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.