Split navbar with logo in the middle

Support
#1

Hello,
I am trying to make my navbar like the one on this website --> https://www.leaderbagco.com/
I’m using ethos demo theme. Please help.

Thank you

#2

Hi @Rosalynn_Ashwood,

Thanks for writing in.

You can easily create that navbar using the Pro header builder.

If you are using X theme, you will need to use the menu as your logo in the middle. The menu in the middle will be having an image/text so that it will be the logo and the class in the middle menu item has a different spacing on the side so that it will be separated with other menu items.

Hope it helps.

Let us know how it goes.

Thanks.

#3

Hi @nico,

Thank you for the response.

I just bought pro and I’ve got the look down perfectly now. Could you tell me how to make the transparent navbar turn opaque on scroll? Will I need to use javascript for that or is there a pro function?

#4

Hi there,

Please go to the Header Builder and select the Bar which you set it to be sticky. Make the background color of that bar Transparent:

Then click on the Customize tab of the Bar and add opacity-sticky class:

Finally add the CSS code below to Pro > Launch > Theme Options > CSS:

.opacity-sticky.x-bar-fixed {
    background-color: rgba(0,0,0,0.5) !important;
}

The RGBA format is the normal RGB color code and the last a is the opacity. For more information Click Here.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

#5

Hi There,

Thanks for the confirmation!

Yes there is a option to make the header similar look.
Can you please send us a screenshot or a reference so that it will be easy to understand what exactly you want to achieve. Please let us know so that we can help you.

Mean while you can check header builder options here. https://theme.co/apex/forum/t/pro-header-and-footer-builder-introduction/103

Thanks

#6

Hello,

Thanks for the help! that worked perfectly.

I will make sure to follow the posting guidelines next time.

#7

Glad that we could be of a help :slight_smile:

#8

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