Docs

[MeyMorgan]

I saw this topic https://community.theme.co/forums/topic/transparent-headernavbar-only-when-on-top-of-page/ and want to do the same navbar like in this topic (http://themenectar.com/demo/salient-frostwave/). But i think i can’t collect all the pieces to get the same navbar like on this homepage. I really want exact the same with the smoth scroll, shrink Logo and dropdown etc. is this possible?

Thank you.

[Rad]

Hi there,

Thanks for writing.

The effect could be possible through CSS transition/animation, but not the exact copy of the sidebar.

You could provide your site’s URL and I’ll check if we can apply the same effect.

Thanks!

[MeyMorgan]

Hello,

here i have the URL.
https://sv-handorf-langenberg.de/wordpress/

It must be possible on mobile two that would be awesome!

Thank you

[Joao]

Hi There,

Please click Edit Page, scroll down and select a existing revolution slider under your masthead.

Also would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[MeyMorgan]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the information. Upon checking, the background color of the navbar already changed from transparent to a solid color. I assume you already have figured it out. All we need for now is to have a code that will resize the logo as soon as you scroll the page. To do that, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .x-brand img {
    transition: all 0.5s linear;
}

.x-navbar.x-navbar-fixed-top .x-brand img {
    width: 55px;
}

Feel free to make it smaller or a little bigger if needed.

[MeyMorgan]

Thank you for helping,

but i do have some issues.
1. can i insert a code to let the navbar shrink smoother like the logo?
2. If the Navbar is in mobile mode, i cant’t scroll and can’t see all links.
3. I want to make the line thiner
4. if the navbar shrink the dropdown menue don’t fix on the navbar.

than i think we are done 🙂

Thanks.

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

1.

.x-navbar-fixed-top.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding: 0 10px;
    font-size: 12px;
    transition: 0.8s ease all;
}

2.

@media screen and (max-width: 979px){
.x-navbar {
    position: relative !important;
}
}

3.

.x-navbar {
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

4.

.x-navbar-fixed-top.x-navbar .desktop .x-nav > li ul {
    top: 70px;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[MeyMorgan]

THANK YOU!!!!!

[MeyMorgan]

Just one thing 🙂

if i scroll back on top the navebar should smooth back like the logo.
And if i go on mobil the menue icon shouldn’t hover in white/transparent.
Can we do this?

Thank you!

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce), .x-navbar {
    transition: 0.8s ease all !important;
}
.x-btn-navbar {
    color: #444 !important;
}

Let us know how this goes!

[MeyMorgan]

Thank You!

[Joao]

You are welcome,

Happy new year!

[MeyMorgan]

Good morning,

sometimes i get a border around the links in the Navbar,
i want to ask if i can remove it, please take a look to the Screenshot.

Thank you very much 🙂

[MeyMorgan]

hey,

one other problem, i want to user a full-width Layout on the first Page
and a block-Layout on the other pages and i fond a code to do this

.home .site {
margin: 0 !important;
border: 0 !important;
width: 100% !important;
max-width: 100% !important;
background-color: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

but now on the other pages the navbar is not in the right position, can you halp me out with this?
And also, i want to give the pages a costume background.

Thanks for your help

[Author]

Posts