Logo in sticky header

Schreckgespenst

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

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; }

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

Schreckgespenst

THANK YOU. THIS IS AWESOME! 

createcr

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

createcr

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

Hi,

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

thanks

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

Stilltheman

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

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.

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

Stilltheman

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

Please use this Custom CSS code instead

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

Thanks

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

Stilltheman

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

Hi,

Check this:

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

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

Stilltheman

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

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

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

Stilltheman

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

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

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

Stilltheman

Thanks for all the other help, appreciate it…