Support › Forums › Flex Theme › Making header flush with menu
Tagged: header, primary navigation
- This topic has 7 replies, 3 voices, and was last updated 5 years, 5 months ago by
nomad_jess.
-
AuthorPosts
-
August 5, 2015 at 12:19 pm #445
nomad_jess
ParticipantHi 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
August 5, 2015 at 12:28 pm #447Davinder Singh Kanith
ModeratorIn style.css file, set padding to 0px in the following code and then check.
.site-header .wrap { padding: 5px; }
August 5, 2015 at 12:41 pm #448nomad_jess
ParticipantHi 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?
August 5, 2015 at 1:11 pm #449Chinmoy Paul
ModeratorHello 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.
August 5, 2015 at 1:20 pm #451Chinmoy Paul
ModeratorIf 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.
August 5, 2015 at 1:26 pm #453nomad_jess
ParticipantHi 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
August 5, 2015 at 1:30 pm #454Chinmoy Paul
ModeratorReplacement 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 { }
August 6, 2015 at 12:47 am #455nomad_jess
ParticipantHi 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.
-
This reply was modified 5 years, 5 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.