This topic has 20 replies, 3 voices, and was last updated 6 years by Radu.

  • Author
  • #155371
     lordival
    Participant

    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.
    #155431
     Laura
    Moderator

    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 🙂

    #155541
     Radu
    Moderator

    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
    #155599
     lordival
    Participant

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

    #155637
     Radu
    Moderator

    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
    #155727
     lordival
    Participant
    This reply has been set as private.
    #155823
     Radu
    Moderator
    This reply has been set as private.
    #156694
     lordival
    Participant
    This reply has been set as private.
    #156830
     Radu
    Moderator

    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
    #156967
     lordival
    Participant
    This reply has been set as private.
    #157223
     Radu
    Moderator

    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
    #157687
     lordival
    Participant

    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 :/

    #158086
     Radu
    Moderator

    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
    #159364
     lordival
    Participant
    This reply has been set as private.
    #159536
     Radu
    Moderator

    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
    #159555
     lordival
    Participant

    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.

    #159662
     Radu
    Moderator

    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
    #159764
     lordival
    Participant

    Thanks so much. it works perfectly.

    Best Regards,
    Diego

    #159870
     Radu
    Moderator

    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
    #161185
     lordival
    Participant

    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

    #161638
     Radu
    Moderator

    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
Viewing 21 posts - 1 through 21 (of 21 total)

The forum ‘General questions’ is closed to new topics and replies.

Log in with your credentials

Forgot your details?