Change height of navigation bar so I can use larger logo

maxrevz

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

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

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

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

maxrevz

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

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

@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.

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

maxrevz

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

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

Soweic

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

Albert

@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.

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

maxrevz

This works prefectly, thanks!

cscreatives

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

Albert

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

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

cscreatives

lbf.cscreatives.com

Albert

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

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

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

cscreatives

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

cscreatives

thanks! that works!

Albert

No problem

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

dasser

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

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

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

oliveweb

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

Albert

@oliveweb Try below css instead:

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

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

oliveweb

working! thks

Albert

You're welcome

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

LaurenzS

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

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

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

LaurenzS

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

Albert

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

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

Xavier362

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

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

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

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

hannahgo

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