How to hide Top Menu on scroll when Main Menu set to transparent

[gm713]

Hi,

I have 2 part question:

1. How to make the Top Bar transparent?
2. How to hide the Top Bar when the Header (main menu) is set to transparent and Sticky? Right now when the Header is set to stick, the top bar sticks as well.

[Laura]

Hello, as i see the top bar is white, what do you mean by transparent? And when scrolling only the header is sticky

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[gm713]

Don’t look at the current website as we’re redesigning it.

Similar to your site (https://seventhqueen.com/themes/kleo/) I am trying to make the Top Bar transparent. As the user then scroll down, I want the Top Bar to stick, again similar to your site.

The only variation I want is I want add a Top Bar above the Header which shows on page load but hides on scroll. I want the Top Bar to be transparent/see through, similar to the Header.

[gm713]

More like this https://seventhqueen.com/themes/kleo/material-design-colors/ except I don’t want the Top Bar to have the darker shade.

[Laura]

Hello, the top bar at the link you sent is not sticky and not transparent, i’m not sure if you mean the header, where the logo is?
By default the top bar is not sticky

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[gm713]

OK, let me rephrase to avoid all confusion. Here is what I’m trying to accomplish.

1. Top Bar and Header should be transparent on default Page Load
2. Upon scroll Top Bar should hide. Header should stick, but have a colored background, say white.

How do I accomplish this.

[Laura]

Hello, i can help you with some cs, can you share access?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[gm713]

Hi Laura,

This seems like a bug, unless it’s as designed.

Scenario 1:
When the Transparent Header is selected i.e. checked (via page level settings-see attached), the Top Bar becomes sticky.

Scenario 2:
When the Transparent Header is not selected i.e. unchecked, the Top Bar becomes non-sticky. No other settings have been changed.

I want the Top Bar to be non-sticky in Scenario 1.

Attachments:

You must be logged in to view attached files.

[gm713]

This reply has been set as private.

[Laura]

Hello, your first question was to make them solid when sticky, so now do you want it to not be sticky? 🙂 Let me know

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[gm713]

Not sure what you mean by them. There are 2 components viz. (1) Top Bar (2) Header

Here is what I want:
– On page load, Make the top bar transparent. Also, make the Header transparent.

– On scroll, hide the top bar. Make the header white.

How do I accomplish this?

[Laura]

Hello, i cant login to wp-admin as its asking captcha and i cant view it

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[gm713]

Try again now. Also, for some reason the website is loading slow, so give it a few seconds and the captcha will load. Thanks!

[Laura]

Hello, try y adding this to style.css of child theme

COPY CODE

.navbar-transparent .navbar .kleo-main-header.header-scrolled {
    background-color: white !important;
}
.navbar-transparent .navbar .kleo-main-header.header-scrolled a {
    color: black !important;
}

For the top bar, try making the header not sticky, and then with some css i could make it sticky, because the top bar follows the header when sticky

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[gm713]

OK. Thanks for this. I updated my child theme css to include this.

How do I make the header “not sticky”. Where is that setting?

[gm713]

OK, so I found the setting and made the header not sticky in the Header options. Like you said the top bar is not sticky anymore.

What’s the css to make the header sticky?

[Laura]

Hello, i still see it sticky, let me know 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[gm713]

Hi. I had made the header sticky. Now I’ve turned it off, please take a look and let me know.

[Laura]

Hello, now i see an internal server error, let me know 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[gm713]

If that happens, just try refreshing a couple times and it’ll come back up.

[Laura]

Hello, please try adding this to style.css of child theme

COPY CODE

.kleo-main-header.header-normal {
    position: fixed;
    width: 100%;
    left: 0;
    z-index: 100;
    border-top: 0;
}

That is all i could do with it i hope it helps 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[gm713]

Hi,

I tried this. We’re almost there. The load state looks good. All I need in addition to this is:
1. The top bar should hide on scrolling
2. The header becomes turns #fff when scrolled.

I understand we’ve gone around a few times, and I appreciate it. Thanks much for your help with this 🙂

[Laura]

Hello 🙂 i do not see it scrolling now, i’m a bit confused on what is missing, let me know 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts