Public Forums 71,145 posts

[VariFrame Friend VariFrameJoin date: November 2015Posts: 76Downloads:10Uploads:1 Thanks: 6 Thanked: 3 times in 2 posts]

#1075405

Mate you need to make it an absolute position 😉 If you check worldwildlife.org elements you can see their logo has:

#header .logo {
    background: url(/assets/structure/unique/logo-c562409….png) no-repeat;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    height: 120px;
    margin: 0;
    position: absolute;
    top: -20px;
    width: 100px;
    z-index: 3;
}

You dont need everything they have here – just use height, z-index and most important: position:absolute.

[VariFrame Friend VariFrameJoin date: November 2015Posts: 76Downloads:10Uploads:1 Thanks: 6 Thanked: 3 times in 2 posts]

#1075406

So I guess your code may look like this:

.jub-block .navbar-brand>img {
min-height: 80px;
z-index: 999;
position: absolute;
top: 0px;
left: 0px;
}

Use your own desired pixel numbers in top and left…

Keep in mind though that you might need to use a different logo styling for mobile devices if you use absolute positioning….

1 user says Thank You to VariFrame for this useful post

1. carlosboni

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1075577

It seems the logo looks fine now, let us know if you still need helps.

1 user says Thank You to Saguaros for this useful post

1. carlosboni

[carlosboni Friend carlosboniJoin date: October 2016Posts: 16Downloads:38Uploads:11 Thanks: 7 Thanked: 1 times in 1 posts]

#1075608

Thank you very much VaryFrame for your solution. I followed your recommendation and worked also on responsive logo for mobiles.

[Author]

Posts