Logo Not Resizing on Responsive View + 2 more

[Breechay]

I toyed around a bit too much with the custom css feature and I’m having multiple site issues.

1. The logo doesn’t resizes and gets cut off in responsive view/mobile ( See file attached “A” )

2. Issue 1 shows up on desktop view when the sticky header option is enabled ( See file attached “B” )

3. The header looks fine on Safari and Chrome but looks abnormally wide in Firefox ( See file attached “C”)
———
This is my current css, where did I go wrong?

.header-6 .container, .header-7 .container {
margin-top: -12px!important;
margin-bottom: -16px!important;
}

#logo img {
height: 52px!important;
min-height: 52px!important;
}

—–

PS. I left my logo (header) settings in theme options blank

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
I checked with firefox and not getting issues as you described.
Thanks
Mohammad

[Rui Guerreiro – SUPPORT]

Hi,

Made some adjustments please check.
-Rui

[Breechay]

Nice, thanks Rui. Can we move it just a tad bit higher (image attached)

Attachments:

You must be logged in to view attached files.

[Breechay]

… and the logo maybe moved 1 px down? The circle looks a bit too close to the top of the screen doesn’t it?

[Kyle – SUPPORT]

Try adding this to your custom css:

.header-6 #logo, .header-7 #logo {
  margin-top: 8px;
}

– Kyle

[Breechay]

Yeah, that didn’t work… I meant reducing the size of the “container” by moving the bottom part closer to the edge of the logo like in the attachment I sent on Feb 18.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Try this css.

nav#main-navigation {
margin-bottom: -18px!important;
}

-Rui

[Breechay]

Perfect. You’re awesome, thank you.

[Rui Guerreiro – SUPPORT]

Glad it’s sorted. Thanks.
-Rui