How to make your header / top nav always show?

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

This topic is: resolved

This topic contains 32 replies, has 3 voices, and was last updated by  csbeck 1 year, 6 months ago.

Viewing 15 posts - 1 through 15 (of 33 total)
  • Author
    Posts
  • #25836

    MM
    Participant
    Post count: 128

    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!

    #25838

    braddalton
    Participant
    Post count: 10594

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

    Or there are plugins which will do this.


    #25842

    csbeck
    Participant
    Post count: 135

    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.

    #25867

    MM
    Participant
    Post count: 128

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

    #25870

    csbeck
    Participant
    Post count: 135

    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

    #25874

    MM
    Participant
    Post count: 128

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

    #25884

    braddalton
    Participant
    Post count: 10594

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


    #25891

    csbeck
    Participant
    Post count: 135

    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.

     

    #25897

    csbeck
    Participant
    Post count: 135

    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

    #25899

    MM
    Participant
    Post count: 128

    Thanks Chris – will have a crack at the above and report results ;) Much appreciated!

    #25920

    MM
    Participant
    Post count: 128

    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

     

    #25935

    csbeck
    Participant
    Post count: 135

    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

    #26035

    MM
    Participant
    Post count: 128

    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;
    }

     

    #26040

    csbeck
    Participant
    Post count: 135

    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

    #26046

    csbeck
    Participant
    Post count: 135

    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

     

Viewing 15 posts - 1 through 15 (of 33 total)

The topic ‘How to make your header / top nav always show?’ is closed to new replies.