Logo in sticky header

Schreckgespenst · April 2017

Hi there,

when I use sticky header the logo is going smaller.

Is there a way to set a special size or that the logo is not so small?

Please look at the page and the logo in the sticky menu

http://oscars.doobacco.de

Thx for help!

Albert · April 2017

Hi,

to increase logo in sticky header, please use:

#Top_bar.is-sticky #logo img:not(.svg) { max-height: 75px !important; }
#Top_bar.is-sticky #logo { padding-top: 0 !important; margin-top: -10px !important; }

Schreckgespenst · April 2017

THANK YOU. THIS IS AWESOME!

createcr · April 2017

Having the same problem - please look at "kylebethdev.wpengine.com"

createcr · April 2017

The above CSS didn't work =/ we are looking to simply increase the sticky header size - as you can see from the site above - it is incredibly small. Scoured through the forums but couldn't find anything that worked!

Bryan · April 2017

Hi,

You do not have a sticky header. Please change the header style.

thanks

Stilltheman · June 2018

Good day Support

Is there a way to keep the menu aligned middle of the header after adjusting the size of the sticky header and logo. Link: http://dupaint.co.za

The menu jumps position on scroll because I've adjusted the height of the header. Please help. Thank you in advance and in future for your awesome theme and updates to come.

Pablo · June 2018

Stilltheman

Please make your logo smaller, it's too big that's why it's not middle assigned.

You can change height of it in:

BeTheme > Theme Options > Global > Logo

http://prntscr.com/jxjadi

Set the default height and vertical padding.

Also, set Vertical Align to middle.

Thanks.

Stilltheman · June 2018

Hi Pablo, Thank you for your prompt feedback…

Oh, how I wish you knew how I want the logo smaller. Not my call, unfortunately.

http://prntscr.com/jxxhol

Previously, the header was fixed and that worked fine, however, because the slider was appearing behind the menu, I had to change the header to 'classic'. If I return it to 'fixed', how can I prevent the menu from overlapping the slider?

Pablo · June 2018

Please use this Custom CSS code instead

#Top_bar.is-sticky .menu_wrapper{
  padding-top:2.5%;
}

Thanks

Stilltheman · June 2018

Good day Pablo

Firstly thanks for your responce ealier. I've resorted to changing the header style to fixed. New problem has arisen:

So, I used below CSS to make the logo bigger on mobile, however, part of the logo disappears behind the banner, Is there a way I can make the header adjust to the increased size of the logo, ie, increase the header size to accommodate the bigger logo?

CSS:

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

#Top_bar .logo #logo img { max-height: 100px !important; }

#Top_bar #logo { height: 100px !important; }

}

Link: (on mobile)

http://dupaint.co.za

Pretty please help Pablo… Thank you

ps: I'm on fixed header style, so I'm hoping the mobile version will display like the desktop which is fixed.

When scrolling, the logo is fine, but not so before scrolling?

Pablo · June 2018

Hi,

Check this:

@media only screen and (max-width: 767px) {
  #Top_bar{
    height:130px !important;
  } 
}

Stilltheman · June 2018

Thanks Pablo

Worked perfectly.

A new problem on the mobile view has arisen from the recent changes though:

1. The search field needs to move down below the header

2. The menu when clicked also needs to display below the header so it's not sitting atop the logo

Save me, thanks…

Pablo · June 2018

1) I don't know what you mean "move down below the header"

It cannot be, because it'll be under hamburger menu(when clicked) and it'll make problems.

2) Paste this CSS code

@media (max-width:767px){
  nav#menu{
    margin-top:60px !important;
  }
}

Thanks

Stilltheman · June 2018

Pablo, you're legendary!

You are rated 10 stars by me for your awesome support.

So, I've fixed request #2.

What I meant with request #1 is that the search field appears atop the logo and not below the header…

See screenshot: http://prntscr.com/jzwf8s

Lastly, how can I ensure the responsive header is fixed and doesn't move on scroll?

Pablo · June 2018

After all this changes we cannot do it.

There will be space all the time, leave it as it is.

It's just a search menu.

Cheers

Stilltheman · June 2018

Thanks for all the other help, appreciate it…

Logo in sticky header

Comments