Hide header/logo size not working right
Hey,
So using the coding you already provided, I decided to hide my header in mobile view and also set the logo size:
@media only screen and (max-width: 767px) {
#Action_bar { display: none !important; }
#Top_bar .logo { display: none !important; }
#Top_bar .top_bar_left { margin-top: 0 !important; }
}
#Top_bar #logo { height: 275px !important; }
But when you go to the site (rhymelines.com) when adjusting the window between full screen and "mobile view" there's a middle part where the header displays in the same size as the logo setting and doesn't hide. I can't figure out the code to fix this, can you help please?
Thanks
Comments
please change 767px value from above code if it does not work as you want. Within this change you can control when exactly css should be activated.
#Header_creative #Top_bar .logo #logo img { max-height: 170px !important; }#Header_creative #Top_bar .responsive-menu-toggle.is-sticky { color: #000 !important; }
height: 200px;
}
Worked for me to push the menu lower ... adjust height in pixels for correct spacing. Maybe a better fix, somehow??
@muffingroup here is the problem in two screenshots
http://prntscr.com/7bil9r before with logo overlapping the menu
http://prntscr.com/7bilv8 after with height adjust
When a deeper logo is used ie 250 x 204 with the 'creative sidebar' the menu is overlapped. The fix I posted above works on a PC, but does not open up the logo depth on a mobile.
A little bit more help please?? Thank-you.
#Top_bar #logo {
height: 200px;
}