Logo overhang Menu

griffithsm

Hi, I was wondering if you can help me out. I'm trying to get the logo image to overhang the bottom of the menu top bar. I can't seem to figure out the CSS to make this happen. Any help with this would be much appreciated. 

I added this code so far. However the size is now good but the overhang is not happening.... Any ideas would be greatly appreciated. I would also like this to work on the sticky header too. 

#Top_bar #logo { display: block; height: 150px; line-height: 0px; padding: 0px 0px; }

this it what it currently looks like....  http://www.southernukulelefestival.co.uk/wp-content/uploads/2015/11/Screen-Shot-2015-11-18-at-20.14.36.png

Albert

Hi,

the answer on your question you will find in the following topic http://forum.muffingroup.com/betheme/discussion/3450/a-logo-question-logo-overlay-slider

Thanks!

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

griffithsm

I have tried to use the code in the post however you haven't answered my question fully. I would still like it to overhang in the sticky menu, plus the logo is no longer in the centre of the header. This is the full code I have now inputted:

#Top_bar .logo { position: relative; min-height: 90px; }

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

#Top_bar #logo img { max-width: 230px; }

#Top_bar #logo { position: absolute; z-index: 200; left: 0; top; 0; overflow: visible; }

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

#Top_bar #logo { display: block; height: 150px; line-height: 0px; padding: 0px 0px; }

Here are 2 screen shots to show both the top bar menu and the sticky menu....

Albert

So if the code from previous topic does not fit to your needs, it may be not possible to do it with your header style. Sometimes, things just can not be done with custom css. If you will provide the url to page where you want to do this, we'll see if there is anything what we can do for you.

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

griffithsm

The site is currently offline as I create it. Surely you are able to help me align it to the centre and enlarge it in the sticky header using CSS. I have seen various other websites using BeTheme have this but i cannot for the life of me figure out the code needed. The link you gave me was for a specific website with specific needs where the logo did not need to be centred. Please help me with my specific query also. 

griffithsm

Managed to eventually figure it out - here's the code I used.... 

#Top_bar.is-sticky .logo { width:auto; margin: 0 30px 0 20px; padding:0;}

#Top_bar.is-sticky #logo { padding:0px 0; height:0px; line-height:0px;}

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

Albert

Like we wrote above, url is necessary. Without link, there is nothing what we can do. Anyway, we're glad to hear that you sorted it out.

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