Full Width Navigation Links

Support
#1

Hi X Team,

http://ccrevents.bluetroop.com/

I would like for the top navigation links to span full width of the browser and not be contained. Any snippets of CSS you can send me to help accomplish this please.

Thanks.

#2

Hello There,

Please add following code to have full width navigation:

.x-navbar .x-container.max.width,
.masthead-stacked .desktop .x-nav {
    width: 100%;
}

.x-navbar .desktop .x-nav>li {
    width: 20%;
}

Thanks.

#3

It worked, but one of the selections (Upcoming Schedule) appears on 2 lines. I want all the selections on one line if possible. How do I prevent them from going to two lines?

#4

Does not look like it is going full width. The nav selection for Online Store went to another line…
http://ccrevents.bluetroop.com/

#5

Hi,

Please change this code

.x-navbar .x-container.max.width,
.masthead-stacked .desktop .x-nav {
    width: 100%;
}

.x-navbar .desktop .x-nav>li {
    width: 20%;
}

To this

.x-navbar .x-container.max.width,
.masthead-stacked .desktop .x-nav {
    width: 100%;
    max-width:90%;
}

.x-navbar .desktop .x-nav>li {
    width: 16.6%;
}

Hope that helps.

#6

Works well now, thank you!

#7

You’re most welcome :slight_smile:

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.