Logo Outside of Header

[brant1121]

Hi there!

How do I get my logo to not be bound by the header so that is overlaps onto the picture/background? I have done this before but then it messes up the responsiveness of the header. I want it to maintain the same look as it is now when it goes to the smaller screen sizes but when full size I want it to overlap. Any ideas? Hopefully this makes sense.

http://181.224.137.164/~bcreated/docrockdds.com/

Any help would be greatly appreciated.

Thanks,
Brant

http://181.224.137.164/~bcreated/docrockdds.com/

[WisdmLabs]

Hi,
Make the following CSS changes in style.css

/* For Desktop
------------------------------------------------------------------------ */
/*Line no. 945 - add max-height*/
.site-header {
    background-color: #333;
    left: 0;
    max-height: 148px; /*Added*/
    min-height: 61px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

/*Line no. 1024 - change min-height*/
.header-image .site-title a {
    float: left;
    min-height: 165px; /*Modified*/
    width: 100%;
}

/* Media Query for lower resolution
---------------------------------------------------------------------------- */
@media only screen and (max-width: 1023px) {
     .site-header {
          max-height: none;
     }
}

You may add the above CSS for lower resolution in existing media query for max-width: 1023px, which you may find on Line no. 2003

---

http://wisdmlabs.com/

[brant1121]

Wow, thank you for your help. Worked perfectly!

[Author]

Posts