Inline header

[lervous1961]

hi
I want to made my header Inline but it’s not showing good.
What can I do ?

thanks

[lely]

Hi Jean,

The best option for you is to restructure your navigation so you can lessen the amount of menu links. All of those links plus the logo doesn’t fit in one row and adjusting the space between each links is not recommended.

About the link vertical alignment, it can be adjusted on Theme Options > Header:

Hope this helps.

[lervous1961]

hi again,
to put the logo more to left, which one I have to adjust ?
thanks

[friech]

Hi Jean,

What Lely’s meant by restructure your navigation is to manage your menu items, to group menu items that can be group. If this is not possible then you need to make your Navbar font-size smaller (currently they are too big), and make your Navbar Top Link Spacing more closer.

Another solution is to make your Navigation and Logo layout Stacked, that way the Navigation will take the entire navbar while the logo has its own logo bar on top. I see that you did this now, please remove this from your custom CSS because this put your menu more to the left (not centered)

.x-nav-wrap.desktop {
    float: left;
    top: 0px !important;
}

Thanks,

[lervous1961]

thanks,
last question about that.
where I go to change the color of the navigation and the color of the items ?
thanks

[christian]

Hey Jean,

If you’re referring to the Navbar background, regretfully, there’s no option for it in the Integrity Stack as that is Integrity’s fixed design. If you know CSS and how to use the browser’s element inspector, you can practically override the fixed parts of our themes. If you’re not a developer, I’d recommend upgrading to our Pro theme so you can use the Header Builder to achieve a custom header design.

About the menu item color, you can change the Navbar Links option in Theme Options > Header > Links - Text.

Hope that helps.

[lervous1961]

hi
so is it available with another stack ?
if yes, where to change the color ?
thanks

[friech]

Hi Jean,

Renew and Ethos stack has the navbar background-color option, but I don’t recommend changing stack just to have the navbar background-color option, you might end up changing a number of things. Stacks has its own unique design and feel.

Looking on your navbar it seems you already have a custom CSS to change that navbar background-color to dark-blue (#003270), in fact there’s three of it.

.x-navbar-inner {
    background-color: #003270 !important;
    margin-bottom: -30px;
}

.x-navbar-inner {
    background-color: #1a4165;
}

and

#top > header > div.x-navbar-wrap > div > div > div.x-container.max.width {
    background: #003270;
}

You can actually remove the other two and just leave the first one. Notice the background-color: #003270 !important; that’s where your current navbar background-color coming from.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Thanks,