Docs

[safetypros]

I am trying to make the menu the full width of the browser window. I am using ethos 3. It seems that inside the x-navbar there is a div that limits the size of the menu. This div is centered in the nav and does not allow the menu items to extend to the edges of the browser window. I have tried to use CSS to make the width 100%, but it will not work. I want the menu to extend all the way across the window so that I can have more menu items without it adding a second row to the menu.

The only thread that I found that addresses this issue was in 2014 and the CSS provided my Themeco is outdated in that thread. Here is the URL to that old thread: https://community.theme.co/forums/topic/full-width-horiz-menu-with-ethos-stack/

Thank you in advance for the help.

-JT

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[safetypros]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! Do you want like this? – http://prntscr.com/dj7bpn

In that case you can add this under Custom > CSS in the Customizer.

.x-navbar .x-container {
  max-width: 100%;
  width: 100%;
}
.x-navbar .desktop .x-nav {
  display: block;
  width: 100%;
}
.x-navbar .desktop .x-nav > li {
  float: left;
  text-align: center;
  width: 20%;
}

Hope this helps.

[safetypros]

That is almost exactly what I would like to do. The display is perfect, but I would like to be able to add more items to the menu and not have them kick down to a second row. When I applied the CSS that you provided, it made the menu full length, but when I add items to the menu it still kicks them down to the next line. I would like to be able to add items to the menu and have the width of the items reduce in order to fit all the items on the same line. Is that possible? Thank you for the help!

-JT

[Joao]

Hi There,

It is possible but you will need to adjust the code , right now each menu item is taking 20% so the size will depend on the amount of menu items you want to have.

If you need help, please add all items and let us know,

Joao

[safetypros]

So 20% per “li” allows for 5 items right? All I would have to do is adjust the code that you sent me to the correct percentage for how many items I want to put in the menu. For example, if I wanted 8 menu items, I would change the 20% to 12.5%. Is that right?

-JT

[Joao]

Yes, that should be correct.

If does not work try 12% or a smaller value.

Hope that helps

Joao

[Author]

Posts