Tagged: header, menu, mobile, responsive
Hello. First let me say I think your theme is fantastic, and for the most part very intuitive and user friendly. I have had some trouble customizing the header but have finally gotten what I want out of a maximized window in chrome and Safari. The link to the website is
1. Unfortunately, on mobile devices the logo does not resize and the menu resizes too much so that it cannot be read, as seen from Safari on my iPhone. Is there a way to make these logo and menu changes resize appropriately?
2. To center the main menu I simply used the margin property, but clearly I will have to edit this if the menu changes. Is their a simple way to center it permanently so that I won’t have to edit its position when I add a menu item?
///EDITED///
Hey 1raddad!
Use media queries to resize the logo on different screen sizes. Please add this at the very bottom of the Quick CSS:
@media only screen and (min-width: 768px) and (max-width: 989px) {
#header_main img, #header_main .logo, #header_main .logo a {
width: 800px !important;
}
}
@media only screen and (max-width: 767px) {
#header_main img, #header_main .logo, #header_main .logo a {
width: 400px !important;
}
}
Adjust the width if necessary.
Regards,
Ismael