Making header flush with menu

[nomad_jess]

Hi there,

There is currently a gap between my header and the primary navigation menu. My header has a straight bottom edge and I’d like it to sit flush on top of the primary navigation menu. How can I go about doing this?

Many thanks in advance,

Jess

[Davinder Singh Kanith]

In style.css file, set padding to 0px in the following code and then check.

.site-header .wrap {
    padding: 5px;
}

[nomad_jess]

Hi Davinder,

Thank you. I tried this. It reduced the space around the header, but didn’t bring it down far enough to sit on top of the menu. Is this spacing coming from padding surrounding the primary nav?

[Chinmoy Paul]

Hello Jess,

First site is looking very good. Looking neater. Great job.

You will edit the style.css file. Replace the current CSS (line no 2963)

.site-header .wrap {
    padding: 20px 30px;
}

WITH

.site-header .wrap {
    padding: 20px 30px 0;
}

====================================

And replace the existing CSS (line no 1334)

.header-full-width .title-area {
    max-width: 100%;
    text-align: center;
    width: 100%;
}

WITH

.header-full-width .title-area {
    line-height: 0;
    max-width: 100%;
    text-align: center;
    width: 100%;
}

Hope that it will resolve your issue.

Thanks
Chinmoy

• This reply was modified 5 years, 5 months ago by Chinmoy Paul.

[Chinmoy Paul]

If you want more overlay effect then you will also edit this CSS

.site-navigation {
    border-bottom: 1px solid #e3e3e3;
    border-top: 1px solid #e3e3e3;
}

with

.site-navigation {
    border-bottom: 1px solid #e3e3e3;
    margin-top: -2px;
}

• This reply was modified 5 years, 5 months ago by Chinmoy Paul.

[nomad_jess]

Hi Chinmoy,

Thank you very much for your help. I haven’t tried your last tip yet, but after I changed the other two pieces of code, my header is now really small. How can I fix that?

Thanks a million!

Jess

[Chinmoy Paul]

Replacement is not properly done. You deleted CSS. You will replace old CSS with my new CSS. Right now I am getting this. It is empty.

.header-full-width .title-area {
}

[nomad_jess]

Hi Chinmoy,

That’s so strange. I double checked the code last night when I saw the issue, and then checked it again when you mentioned it was missing, and both times the code was there for me. In any case, I did the action again and it’s all good now! For whatever reason it just must not have registered the change.

I also changed the site navigation coding as you suggested and now it’s sitting perfectly!

Thank you so much for all your wonderful support. It’s so appreciated.

[Author]

Posts