Hey guys. I am using style 3 (full width logo + menu). I am also using custom CSS for centering the menu which you provided being:
.sf-menu {
display: table;
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* responsive phone */
@media (max-width: 767px) {
.sf-menu {
display: block;
float: left !important;
margin-left: 0px;
margin-right: 0px;
}I have a different logo for the desktop logo and mobile logo. The mobile logo is smaller. Now on mobile view, it is showing the desktop view logo. It is also hiding behind the transparent header of the mobile view.
What is the issue here?
The issue looks like the fact that you’re setting .sf-menu to display: block on screens smaller than 767px. The team has designed the two menus (desktop and mobile) to both exist on the page and just hide one or the other using display: none. (Not a great way to do it in terms of SEO but they say they’re working on it.) By setting sf-menu to display:block you’re forcing it to show on mobile too.
The actual mobile menu id is #td-mobile-nav — that’s the one that slides in on the side. The little toggle icon for it is td-top-mobile-toggle. Your CSS would want to affect one of those. But are you sure you want to centre the mobile menu as well? There isn’t much to centre. 🙂
Hi,
Thanks @TheMediumUTM, that’s right!!
@sbo
You would have to use a more specific selector, try using this id #td-top-mobile-toggle on mobile, like this:
@media (max-width: 767px) {
#td-top-mobile-toggle .sf-menu {
display: block;
float: left !important;
margin-left: 0px;
margin-right: 0px;
}This way you will select only the mobile menu and the other will remain hidden like it should and you will be able to center the menu as you like but you will also have to center or work on the search icon also.
Thanks
@TheMediumUTM, thanks for the info. I don’t necessarily want to center the logo on mobile I just want to be able to use the logo I have set for mobile. @Lucian, I replaced the .sfmenu with your adjustment but seeing no new results. It is still being displayed behind the menu and using the desktop version of the logo.
Hi,
Please send me your site’s URL, I need to inspect this so I can provide you a fix.
Or try to replace the css which centers the menu and use only this one:
#td-top-menu .sf-menu {
display: table;
float: none;
margin-left: auto;
margin-right: auto;
}Should’n affect the menu on mobile: http://screencast.com/t/EOBRjXJzr4Y
Just center it on other screens: http://screencast.com/t/kTql787mh1ll
Thanks
Now that it’s fixed and infront of the header in mobile, its squished. My header logo is 1114px in width. It’s not using the mobile one that I uploaded. It currently looks like this: http://screencast.com/t/wNIXiq50ysb
Hi,
Please make sure that you are using other header style than 3 or 6 with those styles the logo dose not changes.
Thanks
Can I give you access here? I am still experiencing this issue.
Hi,
Please use this custom css to fix this:
@media (max-width: 767px){
.td-header-bg .header-style-3 .td-logo img {
position: fixed;
top: 3px;
z-index: 3;
width: 180px;
height: 48px;
}
.td-menu-placeholder .td-affix {
height: 48px;
z-index: 2 !important;
position: fixed !important;
}
}Should work like this: http://screencast.com/t/OTIVJzbYW8p
The logo looks like that because of it’s original size, try to add an logo for mobile from theme panel.
Thanks
You can close this 🙂
