• Home
  • Blog
  • Showcase
  • Setup Docs
    • Sunshine Help
    • Flex Help
  • Support
    • Support Area
    • Contact us
    • Feedback
  • Connect
    • Newsletter
    • Twitter
    • Facebook
  • My Account
  • Flex
  • Sunshine
Support : Simple Pro Themes

Support : Simple Pro Themes

[Resolved] Making header flush with menu

If you have purchased a product, please enter the email address that you used to register at time of purchase.
Log In
Lost Password

Create an Account
  • Your username must be unique, and cannot be changed later.
  • We use your email address to email you a secure password and verify your account.

Support › Forums › Flex Theme › Making header flush with menu

Tagged: header, primary navigation

  • This topic has 7 replies, 3 voices, and was last updated 6 years, 9 months ago by nomad_jess.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 5, 2015 at 12:19 pm #445
    nomad_jess
    Participant

    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

    August 5, 2015 at 12:28 pm #447
    Davinder Singh Kanith
    Moderator

    In 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 #448
    nomad_jess
    Participant

    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?

    August 5, 2015 at 1:11 pm #449
    Chinmoy Paul
    Moderator

    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 6 years, 9 months ago by Chinmoy Paul.
    August 5, 2015 at 1:20 pm #451
    Chinmoy Paul
    Moderator

    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 6 years, 9 months ago by Chinmoy Paul.
    August 5, 2015 at 1:26 pm #453
    nomad_jess
    Participant

    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

    August 5, 2015 at 1:30 pm #454
    Chinmoy Paul
    Moderator

    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 {
    }
    August 6, 2015 at 12:47 am #455
    nomad_jess
    Participant

    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
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.
Log In

Copyright © 2022 · Simple PRO Themes for Genesis Framework · About · FAQs · Contact · Affiliates