Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • March 21, 2017 at 12:30 pm #764144
    QADEBVBA

    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?

    March 23, 2017 at 4:17 pm #765535
    Yigit

    Hey!

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

    Best regards,
    Yigit

    March 23, 2017 at 5:38 pm #765594
    QADEBVBA

    Hi,

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

    Thnx!

    March 23, 2017 at 5:45 pm #765604
    Yigit

    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

    March 23, 2017 at 9:23 pm #765747
    QADEBVBA

    Here you go!

    March 25, 2017 at 9:09 pm #766733
    Victoria

    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.
    March 27, 2017 at 1:54 pm #767417
    QADEBVBA

    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!

    March 27, 2017 at 6:51 pm #767626
    Victoria

    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

    March 28, 2017 at 9:26 am #767994
    QADEBVBA

    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.

    March 29, 2017 at 6:13 pm #768971
    Victoria

    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

    April 19, 2017 at 5:45 pm #780075
    mmagnani

    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!

    April 20, 2017 at 12:15 pm #780487
    Yigit

    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

    March 2, 2018 at 10:21 am #920189
    carmentvaalba

    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

    March 2, 2018 at 11:56 am #920249
    Vinay

    Hi,

    Please try adding the below CSS to your site.

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

    Best regards,
    Vinay

    March 2, 2018 at 11:58 am #920254
    carmentvaalba

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

    March 3, 2018 at 6:25 am #920641
    Rikard

    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

    March 5, 2018 at 4:51 pm #921577
    carmentvaalba

    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

    March 6, 2018 at 5:35 am #922037
    Rikard

    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

    March 6, 2018 at 9:55 am #922112
    carmentvaalba

    great! now is correct! Thank you

    March 6, 2018 at 9:57 am #922114
    carmentvaalba

    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

    March 14, 2018 at 8:16 pm #926813
    Vinay

    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

    March 14, 2018 at 8:44 pm #926826
    carmentvaalba

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

    March 16, 2018 at 5:14 am #927895
    Ismael

    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

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