changing the Menu to one Line

stagingyoucanafford · Member · Nov 25, 2014 at 12:19 am
Copy link

Add topic to favorites
Hi everyone,

I have the Basis Theme. I have 6 menu icons on the top. Because I have 6 menu options, it moves the last menu option (Contact) to another line.

How can I make the full menu on one line??

Here are my menu options Now: What My menu looks like now

Here is about how I want it to look like: What I want my menu to look like

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 25, 2014 at 4:33 am
Copy link
Hi there, first off, remove the display: block; declaration from this rule in your CSS
li#menu-item-357
and then add the following CSS.
```
@media screen and (min-width: 800px) {
#title {
    max-width: 30%;
}
#basis-header-nav {
    max-width: 68%;
    width: 100%;
}
}
```
The above I’ve limited to 800px and wider device/window widths since narrower and that and the minified tablet/phone menu activates. The above though, only keeps the menu on one line when the browser window is wider than 998px. Narrower than that, and the menu breaks to two lines.

You could change things up a little though and have the menu go full width above the logo you have with the following (keep the display: block; declaration removed)
```
@media screen and (min-width: 800px) {
#title {
    max-width: 30%;
}
#basis-header-nav {
    max-width: 100%;
    width: 100%;
}
}
```
or (again, keep the display: block; declaration out and try this instead which puts the menu below the logo/title.
```
@media screen and (min-width: 800px) {
.header-wrapper {
position: relative !important;
}
#title {
max-width: 30%;
position: relative;
top: -30px
}
#basis-header-nav {
max-width: 100%;
width: 100%;
top: 145px;
}
}
```

No items found.