Header issues; Safari shows mobile version, active menu on Safari not working right

mousey_mick · April 2016

Please take a look: http://tommctighe.com/restore/

Header works great on desktop in Chrome, FireFox, IE, except there's a ghost of each page title on each page below the logo. I fixed that by adding:

#Subheader .title {

display: none;

}

Below 768px, there's an extra grey bar at the bottom of the header.

On a desktop, Safari is displaying the mobile version of the site, and when you click the hamburger menu icon, the menu items display over the main content so you can barely see them.

Layout style: Fixed
Hide subheader: Not checked
Minimalist: Minimalist|ON

Full width: checked
Sticky header: ON

Style: White

Albert · April 2016

So what exactly you want to do? Remove grey background which is on mobile behind "Let's talk" button?

mousey_mick · April 2016

Thanks for the quick reply. I figured out what I need:

To remove the extra space on mobile:

@media only screen and (max-width: 767px) {

#Subheader { display: none !important; }

}

To fix the hard-to-see menu on tablet (768 - 1239), I added a background color:

@media only screen and (max-width: 1239px) {

#Top_bar #menu > ul {

background: #ccc;

}

Albert · April 2016

Great

It's good to see that you sorted it yourself!

Header issues; Safari shows mobile version, active menu on Safari not working right

Comments