Change height of navigation bar so I can use larger logo

maxrevz · August 2014

I would like to change the height of my navigation bar so I can use larger logo, can you help me? I have looked through the CSS and I can not find something to work. When I try to use a bigger logo it goes below the slider it does not auto expand the nav like lots of themes do.

Here is my navbar (I want a bigger logo):

Soweic · August 2014

I got mine fixed from the support by add this code in Custom CSS in theme option.

/* Change size of logo and its placeholder */

#Top_bar #logo img { max-height: 80px; }

#Top_bar.is-sticky #logo img { max-height: 60px; }

#Top_bar.is-sticky { height: 65px; }

You may try tweaking to your own need.

Albert · August 2014

@maxrevz Just like @Soweic wrote, this css should help you because this is what we give to users if they need larger navigation bar.

maxrevz · August 2014

Hey guys, thanks for the help!

I pasted the code in the CSS editor (www.mywebsite.com/wp-admin/themes.php?page=editcss)

The navigatiopn height is only changing when I scroll down. I need the main nav height bigger so I can put in bigger logo. It still looks the same as the image above.

Soweic · August 2014

You can increase this #Top_bar #logo img { max-height: 80px; }

to 160px and make sure you reupload a bigger logo too

However, I too want an independent control on the logo like some other themes.

Albert · August 2014

@maxrevz If code above does not helped, then please send us url to your website and only then we`ll be able to help you. Also please make a screenshot of how this should look like in your mind and we`ll check what we can do for you.

maxrevz · August 2014

Thanks again for all of your help!

The website URL is (temp domain): http://162.144.97.111/~aiescom/

Here is my header:

Here is my custom CSS code placed in appearance/edit CSS:

maxrevz · August 2014

You can see that the logo is still behind the subheader.

Soweic · August 2014

Try adding this: #Top_bar #logo { height: 170px; }

Albert · August 2014

@maxrevz Please try below css:

#Top_bar #logo { height: 90px; }

The code @Soweic gave you above is fine but height will be too large and that`s why we think 90px will be much better.

maxrevz · August 2014

This works prefectly, thanks!

cscreatives · April 2015

I used the css to enlarge the logo, now my menu links are not centered. Is there a code for that as well?

Albert · April 2015

@cscreatives Please send us url to page where you did it and we'll help you.

cscreatives · April 2015

lbf.cscreatives.com

Albert · April 2015

@csvreatives Ok. So to move your menu down, please use below css:

.header-menu-right #Top_bar .menu_wrapper { margin-top: 15px; }

cscreatives · April 2015

I'd like for the links to be centered vertically in the header container.

cscreatives · April 2015

thanks! that works!

Albert · April 2015

No problem

dasser · November 2015

Hi

I would like to use a larger image but keep the header the same height, so the image overlays the header into the next section. how can i achieve this I was thinking float, or absolute positioning and z index on the logo? however i'm concerned about the responsive side

thanks

Albert · November 2015

@dasser This is unfortunately not possible. What you want to do, requires files customization.

oliveweb · December 2015

Hi. I have used #Top_bar #logo img { display: none; } to remove logo completly. But it still appears on mobile version. Please help !

Albert · December 2015

@oliveweb Try below css instead:

#Top_bar #logo { display: none !important; }

oliveweb · December 2015

working! thks

Albert · December 2015

You're welcome

LaurenzS · September 2016

i have tried the things that were recommended and the bigger logo appears correctly, but the links are not centered vertically..

i have tried this but it didnt work for me... also is there a possibility to hide the logo with a sticky header while i scroll down?

.header-menu-right #Top_bar .menu_wrapper { margin-top: 15px; }

Albert · September 2016

@LaurenzS Please send us link to page where links are not centered vertically then.

LaurenzS · September 2016

http://www.monika-schwaighofer-yoga.at/startseite/ here is the problem

Albert · September 2016

@LaurenzS Please remove your extra css and you see that everything would be fine because currently it isn't because of your own customization.

Xavier362 · February 2017

Hello, I need to align the menu vertically on sticky mode. I made the logo bigger and the whole background bigger tweaking the css. How can I align the menu vertically on sticky mode?
My site is talkingtransformation.org.

Thanks!

Albert · February 2017

@Xavier362 To align menu vertically, you need to use custom css:

#Top_bar.is-sticky .menu_wrapper { margin-top: 10px !important; }

hannahgo · June 2017

Hi @muffingroup ,

thanks for the kind support. I really appreciate that.

I wonder if it's possible to change the height of the logo only for the responsive mode. ( Especially when using the website on a tablet)?

Sorry If I missed the it in another thread.

http://www.nt-muenchen.de/

Thanks for the help!

Hannah

Change height of navigation bar so I can use larger logo

Comments