• 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 20 posts - 1 through 20 (of 33 total)
1 2 →
  • Author
    Posts
  • March 13, 2013 at 7:48 am #25836
    MM
    Member

    Hi,

    On Eleven40 theme and mikemetcalfe.co

    I'm trying to have the header bar always show, so if users scroll down, it's always at the top of page.

    Anyone found a solution? Thanks!

    March 13, 2013 at 8:02 am #25838
    Brad Dalton
    Participant

    This may need some modifying http://www.briangardner.com/sticky-menu/

    Or there are plugins which will do this.


    Tutorials for StudioPress Themes.

    March 13, 2013 at 8:21 am #25842
    csbeck
    Member

    I've done this recently on a site I completed (http://www.wealors.com). It's not as flashy (no fade or sliding etc.) but it does the trick. I just made sure that the header/menu area had these attributes:

    .header {

    position: fixed;

    top: 0px;

    }

    I hope this helps.

    March 13, 2013 at 9:59 am #25867
    MM
    Member

    Thks csbeck and brad.  @csbeck - did you insert that in style.css ?

    March 13, 2013 at 10:12 am #25870
    csbeck
    Member

    Hi Michael,

    Yes, I did have that information in my style.css (Appearance/Editor).

    In fact, if I were you, I would find the section in your style.css with "/* Header" and add a new style and attributes:

    #header {

        background: url("images/bg.png") repeat-x scroll 0 0 transparent;
        margin: 0 auto;
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100%;
    }
    Or something like this. This way, your background will stay with your header.

    Good luck.  Chris

    March 13, 2013 at 10:29 am #25874
    MM
    Member

    Awesome, thanks Chris. Almost there! Any idea what's wrong here: mikemetcalfe.co ? Thks.

    March 13, 2013 at 11:14 am #25884
    Brad Dalton
    Participant

    Good little trick. Heaps easier than using 3 types of code.


    Tutorials for StudioPress Themes.

    March 13, 2013 at 12:01 pm #25891
    csbeck
    Member

    Yeah, almost there.

    You've got 2 sets of quotes for the background image. You'll need to remove those. That will fix your background.

    Now you have to push your inner div down so it doesn't get cut off. Use:
    #inner {

        clear: both;
        margin-top: 50px;

    }

    And then you'll have to remove the background from the first wrap div.

    #wrap {

        background: url("images/bg.png") repeat-x scroll 0 0 transparent;

    }
    You can either remove the background line or comment it out like this:

    #wrap {

        /***background: url("images/bg.png") repeat-x scroll 0 0 transparent;***/

    }

    Everything should look good then.

     

    March 13, 2013 at 12:12 pm #25897
    csbeck
    Member

    Looking at it a bit more, I notice that the background graphic for the #header has a little white gradient for the shadow. This doesn't look totally polished as you scroll the page down. You can see the white pixels.

    If you have Photoshop, I'd suggest making a modification to the graphic. Take it in Photoshop and use one of these methods:

    crop out the bottom few pixels and upload it to your theme images folder. For the shadow and add a drop shadow to the #header style using CSS (http://css3generator.com/) - watch out for compatibility though - older IE and others might not display the shadow.

    delete the white shadow and add a transparent shadow (either using a gradient fill or a layer effect (watch out with the layer effect though - drop shadows don't go all the way to the edges because it's only making a drop shadow for the pixels. You'll have to save the drop shadow layer as a layer and stretch it or increase the layers pixels so the shadow goes the full width. I can explain more about this if you want to go this direction - it's a Photoshop thing)). Save the graphic out as a PNG with transparency and upload to your theme images folder.

    This way anything visible below it will look like it's got a shadow on it from the #header. Does this make sense?

    Chris

    March 13, 2013 at 12:22 pm #25899
    MM
    Member

    Thanks Chris - will have a crack at the above and report results 😉 Much appreciated!

    March 13, 2013 at 1:32 pm #25920
    MM
    Member

    Hi Chris - thanks again.

    Turns out it doesn't make sense. Probably user error... but ends up in chaos. Have reset the site.

    Just trying to get the full black bar with orange box / logo section, and my custom menu, sticking as users scroll.

    Have put CSS (version without sticky menu attempts) here  http://diffchecker.com/5cv2e21n 

     

    Think misunderstanding is where to put your code sections suggested. Suggested CSS placement in the link above?

     

    Figure if the black bar sticks, that will remove the white dots issue you mentioned also. THANK YOU for helping.

     

    Michael

     

    March 13, 2013 at 2:14 pm #25935
    csbeck
    Member

    Hi Michael,

    I've made some changes to your style.css file. Try this:

    https://gist.github.com/csbeck/5155707

    Look for all the places that I commented with /** added **/

    I believe you will still have to fix the background image so you don't get the white below the black area.

    Hopefully this helps. Don't hesitate to ask for more info if this doesn't help enough.

    Chris

    March 13, 2013 at 3:37 pm #26035
    MM
    Member

    Hi Chris,

     

    Thanks again - you've educated me on Wraps, Inner and code in the right places 😉

    Played with bg.png and pixels removed. That should be sufficient trickery for now.

    1 error though...

    The menus now only show 1 level of dropdown each time - couldn't find answers on this issue?

     

    Thks, Mike

     

    Also, for Eleven40 users, I changed the below margin-top from 50px to 85px to regain pre-edit spacing.

     

    /* Inner
    ------------------------------------------------------------ */

    /** added **/
    #inner {
    clear: both;
    margin-top: 85px;
    }

    #inner .wrap {
    border-bottom: double #ddd;
    margin: 0 auto 30px;
    overflow: hidden;
    }

     

    March 13, 2013 at 3:50 pm #26040
    csbeck
    Member

    Hi Mike,

    Lookin' good.

    To fix the menu issue (not showing all of your dropdowns) remove this line (or comment it out) from #header:

    overflow: hidden;

    That should do it.

    I'm getting another funny / weird artifact (at least in FireFox). If you go to one of your posts and scroll your page up and down, the social buttons are floating over the header. Not sure what to do about that at this moment. I need to look at that more.

    Your videos are doing the same thing.

    Chris

    March 13, 2013 at 4:04 pm #26046
    csbeck
    Member

    OK. I found where the CSS is making those buttons appear over your header.

    There's a style being used by your social buttons called: a.sd-button > span

    There's an attribute of opacity: 0.8;

    When I turn that off, the buttons go behind the header div. Weird.

    So you could do either of these things:

    Overwrite that style by adding a new style in your style.css:

    a.sd-button > span {

    opacity: none !important;

    }

    or

    Edit your #header style by adding:

    z-index: 100;

     

    Either one of these things should fix that.

    Let me know how it goes. Chris

     

    March 13, 2013 at 4:04 pm #26048
    MM
    Member

    Thanks Chris, menu's are sorted.  I see what you mean re firefox - no idea. If you find answers, I'm all ears 😉

     

     

    March 13, 2013 at 4:12 pm #26051
    csbeck
    Member

    Looks like your videos are still overlapping. Do you have the ability to set your YouTube videos wmode to opaque or transparent. Not sure which one works right off. You'll have to add one of these to the end of your YouTube embed code.

    &wmode=opaque

    &wmode=transparent

    Here's a sample:

    <iframe width="425" height="349" src="http://www.youtube.com/embed/8tPnX7OPo0Q?wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

    Let me know if this works. Chris

    March 13, 2013 at 4:14 pm #26056
    csbeck
    Member

    Please ignore this note...

    March 13, 2013 at 4:49 pm #26069
    MM
    Member

    No worries. The z-index: 100; fix worked for both social icon overlap, and for the videos (except the arrow buttons!). So close to perfect - thanks!

    March 13, 2013 at 4:56 pm #26071
    csbeck
    Member

    OK, I think your videos will work perfectly if you use that "wmode" adjustment.

    Best of luck. Chris

  • Author
    Posts
Viewing 20 posts - 1 through 20 (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