Docs

[hofling]

Hey Guys,

first of all thank you for an amazing theme. I was able to create a couple of great looking websites (from an newbie point of view :D).

What I have a struggle with is the customisation of the Navbar. I tried to create one with RevSlider and other software but I would like to be able to do all customisation with codes etc.

Is it possible to create a Navbar like the one in the attachment with them ex without using other software? If not, which plugin would you guys recommend to create this layout?

Thanks in advance,
Deniz.

[hofling]

Had to upload the file again. Here is it.

[Darshana]

Hi there,

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.

[hofling]

Thanks for answering 🙂
Sure, here is it. Totally forgot.

hofling.de/dentalmanufaktur

I can provide access if needed.

[Rad]

Hi there,

If it’s just re-creating the same layout (not design) then slider and some CSS should be enough.

1. Switch the header layout to inline instead of stack
2. Make the header background transparent
3. Make the navigation background solid, this leaves the logo background transparent creating similar effect from your screenshot
4. Set the masthead height to 0 so it would overlay on top of the slider
5. Place your slider below masthead

Again, this will only prepare the layout and not the design. Would you mind providing your login credentials? I like to set the header layout to inline first so I could confirm the above steps.

Thanks!

[hofling]

This reply has been marked as private.

[Christopher]

Hi there,

Before we continue, please do #1 and #5 from Rad’s replay.

Thanks.

[hofling]

Heyho,

I did #1 and #5

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (min-width:979px){
header.masthead.masthead-inline {
    height: 0;
}
.x-navbar {
    background-color: transparent;
}
nav.x-nav-wrap.desktop > ul {
    background-color: #fff;
}
.x-navbar .x-container.max.width {
    width: 100%;
    max-width: 100%;
    padding: 0 0 0 60px;
}
}

Hope that helps.

[hofling]

Thank you very much Christopher.

I will be able to try it tomorrow and will let you know if the code worked.

cheers

[Joao]

Let us know how it goes,

Joao

[hofling]

Perfect!

Thank you very much. Great support, great community.
Will annoy you guys later with more questions 😀

Cheers.

[Nico]

No worries.

Feel free to ask us again.

Thanks.

[Author]

Posts