• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How to make your header / top nav always show?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to make your header / top nav always show?

This topic is: resolved

Tagged: controls, Eleven40, mobile, scroll, show header

  • This topic has 32 replies, 3 voices, and was last updated 9 years, 10 months ago by csbeck.
Viewing 13 posts - 21 through 33 (of 33 total)
← 1 2
  • Author
    Posts
  • March 17, 2013 at 2:31 am #28507
    MM
    Member

    Hi Chris,

    Video's using a slider plugin so haven't figured out manipulation there yet - getting close.

    Don't suppose you know how to change code in the responsive section (this is eleven40 theme) to the gap in header issue?

    Thks, M

    March 18, 2013 at 8:18 am #28976
    csbeck
    Member

    Hi Mike,

    Your site is just a single page right now so I can't go into your code. I also don't have "eleven40" theme.

    But, if all you're trying to do though is change some spacing in the responsive section for the header, then go down into your style.css code and find where it starts with a label called: /* Responsive Design

    Look for where it says #header and make changes in those sections with respect to the padding, margin and height. You may also have to make a new style called #header or something.

    You may have to make these changes in all of your different media queries sections.

    Something I've found very helpful, if you're not using it, is use FireFox with Firebug or Chrome with Web Developer tools. You can make changes to the css on the fly and see what you need to change.

    I hope this is somewhat helpful. If necessary, you could share your style.css file and I could lend a little more help.

    Chris

    March 18, 2013 at 10:29 am #29025
    MM
    Member

    Hi Chris

    Thanks for that. I've re-opened and here's the CSS:  http://diffchecker.com/77t52ar3

    Tried changing the below...

    .page-title {
    font-size: 24px;
    padding: 10px 20px;

    ... to padding 0px in the body section (as couldn't see elsewhere).

    That seemed to work when decreasing window size on desktop (but also messed up logo/site name padding), but no change on mobile/ipad.

    Appreciate any ideas. thks.

    May 31, 2013 at 10:55 am #43387
    MM
    Member

    Hi Chris,

    Have experimented a lot. The Menu, once on an ipad or iphone size screen, splits and there's a white gap (which I'm trying to remove).

    Current responsive css is:

    .menu-primary,
    .menu-secondary,
    #header ul.menu,
    #header .widget-area,
    #title-area {
    float: none;
    text-align: center;
    width: 100%;
    }

    #header .searchform {
    float: center;
    }

    #header ul.menu {
    background: url(images/bg-pattern.png);
    float: left;
    }

    .menu-primary li,
    .menu-secondary li,
    #header ul.menu li {
    display: inline-block;
    float: none;
    }

    .menu-primary a,
    .menu-secondary a,
    #header .menu a {
    padding: 10px;
    }

    .menu li.right {
    display: none;
    }

    You should be able to replicate on a browser I guess. Any idea how to remove the white gap?

    Thanks!

    May 31, 2013 at 11:44 am #43393
    csbeck
    Member

    Hi Mike,

    Take a look at the style "#header .menu a". You'll see that the padding is:
        padding: 20px 15px 17px;

    You need to change it to:

        padding: 19px 15px 17px;

    Also this style needs to be changed to this for the sub-menu popouts:

    .menu-primary li ul ul, .menu-secondary li ul ul, #header .menu li ul ul {

        margin: -37px 0 0 159px;

    }

    See if that works and let me know.

    PS - sorry for not seeing your message back in March.

    May 31, 2013 at 12:22 pm #43397
    MM
    Member

    Hi Chris

    No worries, thks again. Made those CSS edits but nothing changed unfortunately ??

    I assume from above that the edits were meant for the main, not the responsive, css

    Thks! Mike

    May 31, 2013 at 12:59 pm #43400
    csbeck
    Member

    Hi Mike,

    I just refreshed the page and it looks good to me. But perhaps I'm not understanding your issue.

    Here's a link to a screen shot of your menus. Please let me know if this looks good or not.

    https://dl.dropboxusercontent.com/u/54563062/menustyle01.jpg

    If this is how it's supposed to look and it doesn't show up that way on your computer, you might have to clear your cache or just refresh the page.

    Chris

    May 31, 2013 at 1:16 pm #43403
    MM
    Member

    Thks Chris,

    Now I'm stumped. Here's what I see on ipad,iphone and shrunken browsers (all):

    https://www.dropbox.com/s/ohc3gztk8b3liw9/Screen%20Shot%202013-05-31%20at%2020.00.49.png

    When on small screens / windows, it seems the normal black bar divides in 2, and creates white space between.

    Trying to

    1) eliminate the white space between the text logo section (which displays in centre) and next black box with links

    2) figure out why on small screens, the welcome text widget area (i.e. a blog about) is starting under the black menu

    Thanks for your help 😉

     

    May 31, 2013 at 2:17 pm #43410
    csbeck
    Member

    Ah-ha. OK, I see what you're talking about. Sorry for being so thick-headed.

    So it looks like these are the styles that are making you're page have those issues:
    #header .wrap {

        min-height: 90px;

    }

    #title {

        background: url("images/logo.png") no-repeat scroll 0 0 transparent;
        border-top: 0 none;
        display: inline-block;
        font-family: 'Raleway',arial,serif;
        font-size: 27px;
        line-height: 1;
        margin: 0;
        min-height: 33px;
        padding: 18px 20px 17px;
        position: relative;
        text-shadow: 0 1px #96430D;

    }
    #inner {

        clear: both;
        margin-top: 90px;

    }
    /** in your responsive section (max-width: 800px) **/

    #title {

        background-position: center top;
        padding: 18px 0 17px;
        width: 100%;

    }

    Make these changes:

    #header .wrap {

        min-height: 58px;

    }

    /** in your responsive section (max-width: 800px)**/
    #title {
    background-position: center top;
    padding: 18px 0 0;
    width: 100%;
    }

    #inner {

        clear: both;
        margin-top: 180px;

    }

    See if that does it. There might be some issues with the navigation. Like I noticed that when I went to 800px wide, the navigation went to 2 lines but the last item didn't have a dark background so it looked less than perfect.

    Let me  know how it goes.
    Chris

    May 31, 2013 at 4:21 pm #43417
    MM
    Member

    Genius Chris, it's looking good on most devices. Thank you again!

    May 31, 2013 at 5:01 pm #43422
    csbeck
    Member

    You're very welcome. Just curious, what devices doesn't it look good on?

    June 1, 2013 at 11:32 am #43492
    MM
    Member

    Wasn't working on ipad / iphone. Now it is 😉

    June 1, 2013 at 11:40 am #43494
    csbeck
    Member

    Oh good, so they look good on all devices? Your last note seemed like it wasn't working. Glad to hear it. I just tried it on my iphone and it looks good.

    Best of luck!

  • Author
    Posts
Viewing 13 posts - 21 through 33 (of 33 total)
← 1 2
  • The topic ‘How to make your header / top nav always show?’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble