Need help overlapping logo on top of header menu

  • The Virtual Visionary

    (@the-virtual-visionary)


    9 years ago

    I have a client who just had a new logo designed and wants to know if there is a way to make it look like it’s overlapping the header menu like it’s a sticker on the page (see site link below.) Currently, the logo is too big and the bottom disappears behind the menu. How can I make it to that it shows up on top of the menu, but without covering the actual menu titles? I know I can make it fit in the tan bar completely, but my client would like for it to overlap.

    I’m using the evolve theme and know how to add custom CSS, but do not know how to write any code.

    https://differentdream.com/

Viewing 3 replies - 1 through 3 (of 3 total)
  • ellp

    (@ellp)

    Hello The Virtual Visionary!

    You will have to modify the site header (header.php). Now the Logo is a background image. You need the logo as an stand-alone image inside your header. Something like:

    <img src="yourlogo.jpg" class="my-logo" />

    Your css will be something like this:

    img.my-logo{
display:block;
position:relative;
width:(replace with the logo width, in px);
height:(replace with the logo height, in px);
z-index:100;
top:(adjust the position as you like, in px);
}

    Let me know if it works…

    Just to remember… The best way to do this is using a Child theme. Otherwise, after a update, you will loose all those modifications.

    Good Luck!

    Thread Starter The Virtual Visionary

    (@the-virtual-visionary)

    Ellen,
    Thank you for your response, but that did not work. I am using the evolve theme, and the logo is uploaded in the Header Image section of the customizer because there is no place to upload a logo to appear in the header. Here is the screen shot (the logo looks properly sized, but only because the left customizer dashboard is showing; otherwise, it still disappears behind the header menu.)

    Also, I use the Custom CSS option to input any customizations. I don’t know how to make a child theme, but I understand for small customizations like this, I can use Custom CSS. I finished the website project months ago, but this logo thing is the only thing we want to make a change to.

    When I right click on the header and choose inspect element, this is what shows up as the container in the style CSS sheet:

    /* Containers */

    .container-header {
    margin-top:0px!important;
    margin-bottom:0px!important;
    }

    .container-menu {
    margin:0 auto!important;
    padding-bottom:10px!important;
    position:relative!important;
    z-index:99!important;
    }

    .menu-header:after {
    background: url(“library/media/images/shadow.png”) no-repeat scroll center top rgba(0, 0, 0, 0);
    bottom: -7px;
    content: “”;
    height: 7px;
    left: 0;
    position: absolute;
    width: 100%;
    }

    ellp

    (@ellp)

    Hey The Virtual Visionary!

    I know… You have to modify the header.php file inside of your theme to do it. If you do that the logo uploader will be useless.

    Some links to help you with Child themes:

    https://codex.www.ads-software.com/Child_Themes

    https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Need help overlapping logo on top of header menu’ is closed to new replies.