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

xlinkinfocom · April 2015

Albert · April 2015

Hi,

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

Thanks!

xlinkinfocom · April 2015

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 · April 2015

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 · April 2015

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 · April 2015

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

Futurz · April 2015

still not done
i want background: none

Albert · April 2015

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

Futurz · April 2015

Top Bar Left background i want none

Albert · April 2015

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

Futurz · April 2015

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

xlinkinfocom · April 2015

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 · April 2015

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 · April 2015

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

Futurz · April 2015

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

Thanks

ryanhamilton · April 2015

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%; }

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

Comments