Docs

[watue]

Can the logo bar and navigation bar be different widths? If so, how would I accomplish this? I have not been able to find this in the forums. Your help is appreciated.

[Rupok]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[watue]

The look that I want is in the attached file. The navbar is not 100% width like the logobar is. On my website, when I set the logobar to 100%, it also adjusts the navbar to 100%. I want the navbar to be 1200px.

My logon information is in a private reply.

Thanks for your help.

[watue]

This reply has been marked as private.

[Friech]

Hi There,

Thank you for the screenshot, but it is confusing. The logo bar and the navigation bar from your screenshot has the same width. Please clarify.

But here’s a custom CSS to adjust the logo bar and navbar individually.

/*logo bar container*/
.x-logobar .x-container.max.width {
	width: 100%;
}

/*navbar container*/
.x-navbar .x-container.max.width {
	width: 50%;
}

Could you also tell me how to get a line under the navbar that’s shown in the attached example.

Please create and assign a menu on your site first.

Thanks.

[watue]

I’m sorry that my post was confusing. On my website, whose url is in the private post above, I want the blue background to be 1200px instead of spanning the entire width of the page. I added the css you provided, but it didn’t work. I changed it to 1200px (see below) instead of 50%, but that didn’t work either.

.x-navbar .x-container.max.width {
width: 1200px;}

Can you point me in the right direction?

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.masthead .x-navbar {
    background-color: transparent !important;
    border-bottom: 0;
}

.masthead .x-navbar .x-container.max.width {
    background-color: #1B1F6A !important;
   border-bottom: 4px solid #cbc901;
}

Hope that helps.

[watue]

Thank you, that worked, but it shrank the heights of my topbar. I can barely see the text that is on my topbar. How can I get the text to show again?

[watue]

The text on my topbar is not a problem. It just looked that way in the Customizer, but it’s OK when I view it on the page. Thanks.

[Joao]

Hi There,

Thanks for letting us know.

Cheers

[Author]

Posts