Floating Logo

Hi,

You could try this custom css in Theme Panel > Custom CSs -http://screencast.com/t/TvuZ3DjQcrxt but please note that it also depends of your image size(you have to use a bigger logo than the Travel, I have modified the image size):

@media(min-width: 768px) {
.td-header-style-5 .td-main-menu-logo {
height: 100px;
position: absolute;
}
.td-header-style-5 .td-main-menu-logo img {
max-height: 100px;
}
.td-header-style-5 .sf-menu {
float: right;
}
}

Thanks!

Hello temp2escape,

Please provide your URL website so can I inspect it closer because I cannot recreate this issue on my side.

Thank you for the message!

Hello,
I’m not sure why your logo size changed but you can use this custom css to get it to display the same size as the default header logo:

@media (min-width: 768px){
.td-header-wrap .td-affix .td-main-menu-logo img {
max-height: 80px !important;
}
}

Thank you!

Hello temp2escape,

Please try to use a code below to increase a padding-top. Place the code in Theme panel->Custom Css.

.td-header-menu-wrap.td-affix {
padding-top:15px;
}

Hope this helps and let us know how it goes!

Thank you!

Hello temp2escape,

Please remove the above solution with padding-top and replace it with the code below.

.td-header-wrap .td-affix .sf-menu > li > a {
line-height: 75px !important;
}
}

Now, the menu will work perfectly.

Hope this helps and let us know how it goes!

Thank you for the message!

Hello temp2escape,

If you want to have a logo centered, I suggest using another header style, like header_style_10. This kind of header has the full logo on top + center menu, like this: http://screencast.com/t/mcvaD5dyT For your second request, you can try the code below and see how it works in your side.

@media (max-width: 1140px){
.td-main-menu-logo img {
max-width: none;
}
}
@media (max-width: 768px){
.td-main-menu-logo img {
max-width: 200px;
}
}

Hope this helps!

If is not what you mean, please provide more details about what you want to change exactly.

Thank you for the message!

Hello temp2escape,

Above, I provided you the code that does exactly what you want. I tested again on your site and everything seems to work properly. Please try that code and place it in Theme panel->Custom Css area.
The result you should see here: http://screencast.com/t/FjN7GGeVS – http://screencast.com/t/FjN7GGeVS

Hope this helps!

Thank you for the message!

Hello,

If the code does not apply to your website please try it like so:
@media (max-width: 1140px){
.td-main-menu-logo img {
max-width: none!important;
}
}
@media (max-width: 768px){
.td-main-menu-logo img {
max-width: 200px!important;
}
}

Thank you!

Hello,

Please try the code like so:
@media (max-width: 1140px){
.td-main-menu-logo img {
max-width: 100%!important;
}
}
Are you sure you are adding the code in the correct field? : http://screencast.com/t/HQ9t89UNQO

If it still will not work please send an email at contact@tagdiv.com and provide wp-admin so we can take a look and see why the css does not get applied. All the codes we provided worked on our end from the inspector and from the live css editor.

Thank you!