How to make logo overlap the menu header container…

Hi,

How can I make the logo overlap the menu (links) header container and reduce the height (not the width) of it. The idea is to make logo come above the menu header container and reduce the mega menu links height for more spaces. Screenshot: http://awesomescreenshot.com/07b524o2a4

url: http://sportvision.barniwebs.com

Regards

  • Adam Czajczyk
    • Support Gorilla

    Hey Barni,

    I hope you’re well today and thank you for your question!

    The CSS code below should do the job:

    .td-header-sp-logo img {width:150px!important;margin-top:-80px!important;}
    .td-header-sp-logo {z-index:100000!important;}
    .td-header-top-menu-full {z-index: 8888!important;}
    .td-header-menu-wrap {height:40px!important;}
    .td-header-menu-wrap-full {height:42px!important;}

    Please add this to your theme’s child theme’s style.css file or if you’re not using a child theme, please use a Simple Custom CSS plugin:

    https://wordpress.org/plugins/simple-custom-css/

    You may also want to adjust the “width”, “height” and “margin-top” values of this code to match it with your site better.

    I hope that helps!

    Cheers,

    Adam

  • Vinod Dalvi
    • WP Unicorn

    Hi Barni,

    Thank you for your reply.

    It seems from your shared screenshot that you want to move the primary header menu upwards without moving or resizing the header logo.

    If this is the case then you can achieve this by using the following CSS code as described previously by my colleague Adam in his reply.

    #td-header-menu ul.sf-menu {
    margin-top: 0px;
    }

    You can change the value of margin top in the above code which is 0px to adjust the position of the header menu.

    Best Regards,

    Vinod Dalvi

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.