How to Make Logo height bigger than Menu height (hang logo from menu bar) (see screenshot)

xlinkinfocom

Albert

Hi,

please send us url to page where you want to do this and we'll have a look on it.

Thanks!

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

xlinkinfocom

I want to implement this to www.sims.academy website. I have drawn a graph how do my customer actually wants to. Hope I am able to make you understand.

ryanhamilton

Has this been answered and figured out? I wish to do the same but with the logo centred and using the split menu navigation. Thanks.

xlinkinfocom

ryanhamilton  for reply.

No I did not get any answer and its not yet figured out ! Can u please explain how is it possible with left aligned menu by custom CSS ?

Albert

@xlinkinfocom Ok, we got it. You can do this within below css:

#Top_bar:not(.is-sticky) .logo {
    background: #ffffff;
    position: absolute;
    z-index: 21;
    padding: 0 20px;
    margin: 0;
}

@ryanhamilton If you will send us url to your page then we'll be able to have a look on it and see if in your case it is possible.

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

Futurz

still not done
i want background: none

Albert

@Futurz If you don't want background, then replace #ffffff with none

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

Futurz

Top Bar Left background    i want   none

Albert

@Futurz Do you mean to have slider under the the header where logo and menu is or what? Because now we are confused and have no idea what you want.

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

Futurz

Thanks @xlinkinfocom your script worked perfectly now logo outside the main menu bar and looking as desired.

xlinkinfocom

Hi all,

Thanks for your extended support.

The code is working fine and I have modified little bit :

/**********************************************************/

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

@media only screen and (min-width: 960px) { 

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

}

#Top_bar #logo img {

    max-width: 320px;

}

#Top_bar #logo {

   height: 140px;

}

#Top_bar:not(.is-sticky) .logo {

    background: #fff;

border-radius:0px 0px 12px 12px;

    position: absolute;

    z-index: 41;

    padding: 0 40px;

    margin: 0;

}

/**********************************************************/

ryanhamilton

Great, hopefully joining in with a centred logo version of this isn't a problem and gives two possibilities to future readers wanting to do the same tricks.

my url is www.get-fed.com/get_fed_victoria

Currently I have it kinda working by putting the following code into my custom css.

I would however like to have the sticky header look just like what were trying to achieve here.

/*********************************************************************/

#Header {background-color: rgba(230,227,220,0)!important;}

#Header_wrapper {background-color: rgba(230,227,220,0)!important;}

#Top_bar .menu>li>a span {border-color: rgba(0,0,0,.5);

}

#Top_bar.column{background-color: rgba(230,227,220,0)!important;}

/*********************************************************************/

Albert

@ryanhamilton Did you sorted your logo needs already? Because we are not sure if you need anything else as your website looks really great and there is no issues related with header at all.

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

Futurz

yes everything alright , i got the way to make modifications where ever and whenever.

Thanks

ryanhamilton

Muffin Group,

Yes I think I got things fixed the way I would like. Thanks!

For others wondering, here is what I used for code to have my logo hang below the Menu Bar and Sticky Menu. Also it turns part of the header transparent and adds a texture as a background to part of it as well.

#Header {min-height: 220px;}

#Subheader { display:none;}

.header-split #Top_bar, .header-fixed #Top_bar, .header-below #Top_bar, #Header_creative, #Top_bar #menu  {background-image: url("your_url_for_image_texture");

background-repeat: repeat;}

#Top_bar { border-bottom: 1px solid #a8a8a8; }

#Top_bar #logo { height: 160px; line-height: 100px; padding: 15px 0px !important; }

#Header {background-color: rgba(230,227,220,0)!important;}

#Header_wrapper {background-color: rgba(230,227,220,0)!important;}

#Top_bar .menu>li>a span {border-color: rgba(0,0,0,.5);}

#Top_bar:not(.is-sticky) .logo { width: 300px !important; padding: 0 0px; margin: 0; }

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

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

#Top_bar.is-sticky {background-image: url("your_url_for_image_texture");

background-repeat: repeat-x;}

/*#Top_bar.is-sticky {background: #ffcc00;}*/

#Top_bar.is-sticky{opacity: .97; filter: alpha(opacity = 97);}

#Top_bar.is-sticky { border-bottom: 1px solid #a8a8a8; }

#Top_bar.is-sticky{-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,.4);}

#Top_bar.is-sticky{-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,.4);}

#Top_bar.is-sticky{box-shadow: 0px 2px 5px 0px rgba(0,0,0,.4);}

.top_bar_left .menu_right { width: 55%; }