Support Center Visit Demo License manager Buy @ envato

Logo overhang Menu

griffithsmgriffithsm
edited November 2015 in Menu / Mega menu
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; }




Comments

  • AlbertAlbert
    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
  • griffithsmgriffithsm
    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....
    image
    image
  • AlbertAlbert
    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
  • griffithsmgriffithsm
    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. 
  • griffithsmgriffithsm
    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;}
  • AlbertAlbert
    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
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Neccessary

Necessary cookies help make a website usable by enabling basic functions like page navigation and access to secure areas of the website. The website cannot function properly without these cookies.

Analytics & Performance

Statistic cookies help website owners to understand how visitors interact with websites by collecting and reporting information anonymously.

Marketing

Marketing cookies are used to track visitors across websites. The intention is to display ads that are relevant and engaging for the individual user and thereby more valuable for publishers and third party advertisers.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.