Hi,
I am wondering how to enable responsiveness for the top header menu? I am using it for my Login/Registration forms.
Does anybody have an idea?
Thank you,
Carolin
My website: http://www.blinzzle.de
Hi,
I’m not sure what do you want to do, the top menu it’s already responsive. If you need to enable it on mobiles you will have to do it via css because the top menu it’s hidden on mobiles by default: http://screencast.com/t/ck4PFM7JvM
@media (max-width: 767px){
.td-header-menu-wrap {
display: block !important;
}
}Hope this helps!
Thanks
Hi Lucian,
thanks for your help. I tried your css and it works. But when I move the top header menu items to the right (using this css):
header menu
*/
.td-full-layout .td-header-menu-wrap,
.td-boxed-layout .td-header-menu-wrap .container {
background-color: #2b2b2b;
padding: 2px 0 4px 890px !important;
}
The top header menu is not visible on mobile. Do you have any idea how to show the top header menu items on the right AND showing them on mobile?
Thanks a lot,
Carolin
Hi,
Please replace the menu-top.php file content with this: http://pastebin.com/74EUnHPZ ..like this: http://screencast.com/t/6LYQko2qvJ
Then add this custom css in theme panel > custom css:
@media (min-width: 1200px) {
.top-header-menu, .td-header-menu-wrap .menu-post-and-page-settings-container .menu {
margin: 0px 49px 0px 0px;
}
}
.td-header-menu-wrap .menu-top-container {
float: right;
}After this you will have the item displayed at the top on the right like this: http://screencast.com/t/HNAnqycD
Note that this will remove the top right widgetised area, only use this if you aren’t planning not to use that area.
Thanks
Hi Lucian,
first, thank you so much for your support! Your provided code works – and it doesn’t work. The menu is floating right and it reacts responsive. But for mobile it is still not visible. (By the way, the logo is “jumping” around when the browser is shrinked.
Do you have one more advice?
Thank you,
Carolin
Hi,
I have tested your site and found no issue’s with the top menu, looks and also responds well to all screen widths.
You can use this custom css to display it on mobile also: http://screencast.com/t/NFOuvSvSWQ7i
Thanks
Hi Lucian,
I forgot to enable the mobile menu – now everything is working!
Thank you so much!
I will rate 5 stars 🙂
Carolin
Glad I could help!
Thank you!
