-
AuthorPosts
-
March 21, 2017 at 12:30 pm #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?
March 23, 2017 at 4:17 pm #765535Hey!
Can you please create temporary logins and post it here privately so we can look into it?
Best regards,
YigitMarch 23, 2017 at 5:38 pm #765594Hi,
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 #765604Hi!
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,
YigitMarch 23, 2017 at 9:23 pm #765747Here you go!
March 25, 2017 at 9:09 pm #766733Hi,
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 #767417This 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 #767626Hi,
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,
VictoriaMarch 28, 2017 at 9:26 am #767994Thank 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 #768971Hi 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,
VictoriaApril 19, 2017 at 5:45 pm #780075Hello,
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 #780487Hi,
@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,
YigitMarch 2, 2018 at 10:21 am #920189Hello, 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 #920249Hi,
Please try adding the below CSS to your site.
.av-main-nav > li > a { padding: 0 5px; }
Best regards,
VinayMarch 2, 2018 at 11:58 am #920254Is not solving the problem is even worst I think..
March 3, 2018 at 6:25 am #920641Hi,
Maybe you could try to increase the general width of your site? You can do so under Enfold->General Layout->Dimensions.
Best regards,
RikardMarch 5, 2018 at 4:51 pm #921577Hello, 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 youMarch 6, 2018 at 5:35 am #922037Hi,
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,
RikardMarch 6, 2018 at 9:55 am #922112great! now is correct! Thank you
March 6, 2018 at 9:57 am #922114Sorry! 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 #926813Hi,
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,
VinayMarch 14, 2018 at 8:44 pm #926826https://imgur.com/a/e20RR – yo can see here the screenshot
Thank you CarmenMarch 16, 2018 at 5:14 am #927895Hi,
@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 -
AuthorPosts
- The topic ‘Make top bar sticky on mobile’ is closed to new replies.