This topic has 20 replies, 3 voices, and was last updated 7 years by 
-
-
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
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 solutionLaura 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 🙂
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 solutionI 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 solutionI 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 solutionHi,
Use this CSSCOPY 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 solutionhi 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 :/
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 solutionHi,
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 solutionHi 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.
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 allCheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solutionYou’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 solutionHi, 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,
DiegoHi,
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
RHi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
The forum ‘General questions’ is closed to new topics and replies.
