Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • #764144

    Hi Team Kriesi

    I’m having the following issue with designing a website for a client.

    We want the top bar to be sticky and the menu to be collapsible on mobile devices, but no css code has fixed this problem on actual mobile devices so far. When I make the browser window smaller on a normal PC/laptop, the menu is collapsible and the top bar is sticky, so it does everything we want. BUT on mobile or tablet it doesn’t.

    I’ve added a link to the site, but since the ‘under construction’-plugin is active, I don’t know if that helps you. Maybe a print screen would be better?

    #765535

    Hey!

    Can you please create temporary logins and post it here privately so we can look into it?

    Best regards,
    Yigit

    #765594

    Hi,

    Is it ok if I use the Temporary Logins plugin? What email should I use for your login?

    Thnx!

    #765604

    Hi!

    Sure!

    You can use (Email address hidden if logged out) but please login credentials here privately so any available moderator can look into it :)

    Regards,
    Yigit

    #765747

    Here you go!

    #766733

    Hi,

    Here is the code you can put to enfold/custom.css to help resolve your issues:

    
    .html_header_top.html_header_sticky #header {
        position: fixed !important;
        min-height: 80px;
    }
    
    #advanced_menu_toggle, #advanced_menu_hide {
    	position: absolute !important;
    	right: 0;
    }
    
    #advanced_menu_toggle {
      top: 45%;
    }
    
    #advanced_menu_hide {
      top: 10%;
      right: 10px;
    }
    
    

    Let us know if this was helpful.
    Best regards,
    Victoria

    • This reply was modified 7 years, 7 months ago by Victoria.
    #767417

    This is great, thanks!

    Just one little thing … We would need the collapsed menu button to float as users scroll down the page, so they can open the menu whenever they want. Now the button just stays at the top.

    Everything else works great though, thanks!

    #767626

    Hi,

    Here are is the code that will help you

    
    @media only screen and (max-width: 767px) {
        .html_header_top.html_header_sticky #header, .responsive #top #wrap_all #header {
            position: fixed !important;
         }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #767994

    Thank you very much.

    There still seems to be a problem though… On tablet, the menu bar overlaps the logo and doesn’t transform into the collapsed button. Everything works on mobile, by the way.

    #768971

    Hi QADEBVBA,

    Here is the code you can put this in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    #top .av_seperator_big_border#header .av-main-nav > li > a {
        padding: 0 10px 0 0;
    }
    

    You have to test and see which screen width gives you the overlay and adjust css.
    If you need further assistance please let us know.

    Best regards,
    Victoria

    #780075

    Hello,
    I am trying this solution, but once mobile menu is touched, the header width is set to 480px.
    Is there a way to fix that?
    Thanks!

    #780487

    Hi,


    @mmagnani
    Please try adding following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
        .html_header_top.html_header_sticky #header, .responsive #top #wrap_all #header {
            width: 100% !important;
         }
    }

    Best regards,
    Yigit

    #920189

    Hello, I wanted to do the same, and I have use the code you indicated:

    /* topmenu fixed en moviles*/

    .html_header_top.html_header_sticky #header {
    position: fixed !important;
    min-height: 80px;
    }

    #advanced_menu_toggle, #advanced_menu_hide {
    position: absolute !important;
    right: 0;
    }

    #advanced_menu_toggle {
    top: 45%;
    }

    #advanced_menu_hide {
    top: 10%;
    right: 10px;
    }

    But my problem is that the slider overlaps the area of the top menu : you can see it here: iomm.es

    Thank you, Carmen

    #920249

    Hi,

    Please try adding the below CSS to your site.

     
    .av-main-nav > li > a { padding: 0 5px; }

    Best regards,
    Vinay

    #920254

    Is not solving the problem is even worst I think..

    #920641

    Hi,

    Maybe you could try to increase the general width of your site? You can do so under Enfold->General Layout->Dimensions.

    Best regards,
    Rikard

    #921577

    Hello, maybe I dod not explain myself very well, my problem is not the width, is the high!
    I you go to iomm.es in the iphone version, you can not read the fist phrase, is hidden under the area of the logo and the burger menu.
    Looking for your comments, Thank you

    #922037

    Hi,

    Thanks for the clarification. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
    .home #av_section_1 .av-special-heading-h1 {
      padding-top:30px !important;
    }
    }

    Best regards,
    Rikard

    #922112

    great! now is correct! Thank you

    #922114

    Sorry! is not correct!
    I mean that what I want is to have the top bar with the top menu, logo and burger menu fixed in the top, in desktop and mobile also. What I have now is:

    } /* topmenu fixed en moviles*/

    .html_header_top.html_header_sticky #header {
    position: fixed !important;
    min-height: 80px;
    }

    #advanced_menu_toggle, #advanced_menu_hide {
    position: absolute !important;
    right: 0;
    }

    #advanced_menu_toggle {
    top: 45%;
    }

    #advanced_menu_hide {
    top: 10%;
    right: 10px;
    }
    .av-main-nav > li > a { padding: 0 5px; }

    @media only screen and (max-width: 767px) {
    .home #av_section_1 .av-special-heading-h1 {
    padding-top:20px !important;
    }
    }

    But is not fixed in the top, Looking for your comments, Thank you

    #926813

    Hi,

    Sorry for the late reply, It appears you have figured this one. The top bar and the logo area all look fixed when the page is scrolled.

    If you still have any issue please upload a screenshot/mockup to imgur.com and share the link here so we can help you better :)

    Best regards,
    Vinay

    #926826

    https://imgur.com/a/e20RR – yo can see here the screenshot
    Thank you Carmen

    #927895

    Hi,


    @carmentvaalba
    : Thank you for the info. Please create your own thread with the site url and login credentials. We’ll check the issue there.

    Best regards,
    Ismael

Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Make top bar sticky on mobile’ is closed to new replies.