mobile sticky menu

[lordival]

Hi, I would like to have the sticky menu on mobile. I followed instructions i found on other two support ticket and I ended with some issues. Firstly, my header background turned black (originally was white). Other than that the menu is now sticky but there is a transparent gap between the menu and the top margin of the browser when I scroll down (please see screenshots). I use the top menu on most pages except on 4 key pages which I chose to hide the top menu. I realized that the gap is wider when i scroll down on pages that I use the top menu. This is the css code i resulted from other support tickets:

@media (max-width: 991px) {

.kleo-main-header, .navbar-transparent .kleo-main-header, .kleo-navbar-fixed.navbar-transparent #header {

position: fixed !important;

top: auto!important;

background-color: #000 !important;

}

@media (max-width: 990px) {

div#header {

margin-bottom: 45px !important;

}

.kleo-main-header.header-normal {position:fixed !important;top:0 !important}

}

Thanks in advance,

Diego

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

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 🙂

[Radu]

Hi,

Please add this CSS

COPY CODE

@media (max-width: 991px){
.header-two-rows #header .is-sticky {margin-top: -35px !important;}
}

The CSS will be added to wp-admin -> theme options -> general settings -> quick CSS

Let me know

Cheers
R.

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

What support service includes ? What not ?

[lordival]

hi, thanks so much for reply. but this is still not working.

[Radu]

I see, if you clear cache of the phone or try form incognito mode it’s the same ?

Can you please provide admin credentials to take a closer look ?

Cheers
R.

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

What support service includes ? What not ?

[lordival]

This reply has been set as private.

[Radu]

This reply has been set as private.

[lordival]

This reply has been set as private.

[Radu]

I see, something it’s altered there, do you have the possibility to revert all changes that the freelancer made there? cuz the values that I try to modify and selectors interacts with his values.

I saw some CSS in quick CSS area from theme options -> general -> quick CSS copy them somewhere for later use maybe you will need those and if he made some changes in child theme those should be reverted also.

This it’s something custom but i can help you with fixing menu on mobile.

Cheers
R>

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

What support service includes ? What not ?

[lordival]

This reply has been set as private.

[Radu]

Hi,
Use this CSS

COPY CODE

@media(max-width:991px) {
div#header {
    position: fixed !important;
    width: 100%;
    z-index: 999;
}

}

Cheers
R.

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

What support service includes ? What not ?

[lordival]

hi thanks for your reply. i tried the code provided and now the top menu is sticky too, and there is a gap between top of the screen and menu. So still no luck :/

[Radu]

Hi,

I’ve tried but, there it’s something wrong, the JS should add a class to header when the scroll it’s performed but this it’s hot happens on your site, can you please update the theme to latest version if you don’t have it or if you have it ,re-upload theme files over the existing one.

Let me know

Cheers
R.

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

What support service includes ? What not ?

[lordival]

This reply has been set as private.

[Radu]

Hi,

Pelease check now it should be ok

I’ve added tthis css to quick css area instead the old one that maakes alaso the topbar fixed

COPY CODE

@media(max-width:991px){
    
    div#undefined-sticky-wrapper.is-sticky .kleo-main-header{
    position: fixed !important;
    width: 100%;
    margin-top:-35px;
    }

}

1. I’ve added the logo also on the retina field in theme options -> header options.

2. It’s ok now

3. The resize ooption it’s available only on desktop since the theme doens’t have the fixed menu on mobile cannot benefit for the resize funciton.

If you really need the resize funciton on mobile you can get a quote from our development team at this address dev@seventhqueen.com

Cheers
R.

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

What support service includes ? What not ?

[lordival]

Hi I’m not interested in your expensive developing rates. I had already paid a developer to do it and It was less than a few css code lines and you can’t do it on support of this plugin? Unfortunately his changes got lost after I formatted my server. Don’t be so greedy. You are ruining kleo support.

[Radu]

I’ve found a quicky solution for that

COPY CODE

@media(max-width:991px){
    
    div#undefined-sticky-wrapper.is-sticky .kleo-main-header{
    position: fixed !important;
    width: 100%;
    margin-top:-35px;
    }
	div#undefined-sticky-wrapper.is-sticky .kleo-main-header img#logo_img,
	div#undefined-sticky-wrapper.is-sticky .kleo-main-header .navbar-header {
	    height: 40px !important;
	    line-height: 50px !important;
	    -webkit-transition: all 0.5s ease;
	}

}

Replace the previous code with this one
That’s all

Cheers
R.

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

What support service includes ? What not ?

[lordival]

Thanks so much. it works perfectly.

Best Regards,
Diego

[Radu]

You’re welcome

Cheers
R.

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

What support service includes ? What not ?

[lordival]

Hi, i have made my menu header background transparent through theme options and now my header background is weirdly showing black on mobile when it should be just transparent. However when scrolling down the sticky header background does turn transparent as expected as i am using this css code that you have provided: `@media(max-width:991px){

div#undefined-sticky-wrapper.is-sticky .kleo-main-header{
position: fixed !important;
width: 100%;
margin-top:-35px;
}
div#undefined-sticky-wrapper.is-sticky .kleo-main-header img#logo_img,
div#undefined-sticky-wrapper.is-sticky .kleo-main-header .navbar-header {
height: 40px !important;
line-height: 50px !important;
-webkit-transition: all 0.5s ease;
}

}`

So how to make the header background transparent as it should be initially while making the header background to be white when scrolling down on code above?

Regards,
Diego

[Radu]

Hi,
I’ve tried to find a solution for this matter but I cannot I’ve consumed to much time for this thing and this it’s a custom modification ( fixed mobile on mobile ).

I recommend you to hire a developer to finish you need to achieve.

Cheers
R

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

What support service includes ? What not ?

[Author]

Posts