How do I add a white space between header and menu?

Community Forums Forums Design Tips and Tricks How do I add a white space between header and menu?

This topic is: not resolved

This topic contains 7 replies, has 2 voices, and was last updated by  SoZo 1 year, 9 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #16300

    rick4him
    Participant
    Post count: 128

    I’d like to create a small gap in between the black header background and the menu area on this site. Any thoughts on how to do this?

     

    Thanks!

    #16305

    SoZo
    Moderator
    Post count: 1573

    You could add a bottom margin to the #heade rule, e.g.

    #header {
    min-height: 87px;
    overflow: hidden;
    margin-bottom: 10px;
    }


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #16306

    rick4him
    Participant
    Post count: 128

    Thanks so much! (By the way, I sent you an email.) :)

     

    Also someone mentioned I should ”

    “give the navigation div a top margin

    margin:10px 0 0 0;”

    Is this just a different way to do the same thing? Is one solution better than another?

     

    Thanks!

    #16307

    SoZo
    Moderator
    Post count: 1573

    Ya, you’d end up with the same effect. Doesn’t matter which way you go.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #16308

    rick4him
    Participant
    Post count: 128

    Cool, thanks!

     

    2 follow up questions: after I do that, how can I get a little more black box around my logo / serach box so the logo has a little room to breath…if that makes sense…

    and how can I correct my search box from getting cut off?

    #16310

    SoZo
    Moderator
    Post count: 1573

    You’d need to edit the image that you are uploading and make your actual logo smaller on the canvas. Or increase the height of #header in the style sheet as well as the dimensions of the custom header function in functions.php and use increase the canvas of your image accordingly.
    [php]// Add support for custom header
    add_theme_support( ‘genesis-custom-header’, array(
    ‘flex-height’ => true,
    ‘height’ => 87,
    ‘width’ => 1080
    ) );
    [/php]

    For the search field you could add a right margin to #header .search-form, e.g.

    #header .search-form {
    float: right;
    margin-top: 16px;
    margin-top: 1rem;
    width: 100%;
    margin-right: 16px;
    margin-right: 1rem;
    }


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #16312

    rick4him
    Participant
    Post count: 128

    Thanks! What about just adding some padding around the header?

    #16316

    SoZo
    Moderator
    Post count: 1573

    You could add padding to #header but you’d need to decrease the width accordingly otherwise it throws the header out past the margin of the page elements and I can’t see where they are setting the width. I’ll have to play with this theme more. It’s coded a lot differently than their past themes have been coded. And before you spend too much time messing with this theme we should come up with a design and I just sent you an email that should get us rolling.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.