Header issue below 755px responsive.

robdoar

At wider resolution I have the header looking how I want... (header-fixed #Top_bar is height: 60px;)


Once the resolution drops below 755px wide the topbar increases to 130px, and throws off the header.


I haven't been able to track down the responsive css that's causing it.  Any help would be appreciated.

Albert

Hi,

this is how responsive works and unfortunately this can not be changed on smaller screens.

Thanks for understanding!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

robdoar

I'm sorry, but something is telling the browser what to do.

"this is how responsive works" is not an answer. I've never had another theme do this.

Albert

Yes, this is the answer of course and the only proper answer. Each theme may work different but our works exactly like that. Header is header, but slider is slider. It is not possible to move slider up on mobile devices as you want with our theme. The only thing you can do is move it a little bit up when you will replace your custom css:

 .header-fixed #Top_bar #logo img {
    max-height: 100px;
 }

with:

@media only screen and (min-width: 768px) {
 .header-fixed #Top_bar #logo img {
  max-height: 100px;
 }
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

robdoar

It's not the slider, it's happening on all pages, regardless of slider..


Something is locking the topbar to 120.

Thanks for the help.

robdoar

Nevermind, I was able to make it work.

Albert

Ok. We're glad to hear that you sorted it. But can you let us know what exactly you did?

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

robdoar

I had to edit the margins set around the logo....

@media only screen and (min-width: 768px) {

 .header-fixed #Top_bar #logo img { max-height: 100px; }

}

#Header a.responsive-menu-toggle { position: absolute !important; top: 15px !important; right: 0px !important; z-index: 10; margin: 0; }

#Top_bar .logo #logo { padding: 5px 0 0 0; margin: 0 20px 0 -30px;}