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, 4 months ago.

Viewing 15 posts - 16 through 30 (of 33 total)
  • Author
    Posts
  • #26048

    MM
    Participant
    Post count: 128

    Thanks Chris, menu’s are sorted.  I see what you mean re firefox – no idea. If you find answers, I’m all ears ;)

     

     

    #26051

    csbeck
    Participant
    Post count: 135

    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

    #26056

    csbeck
    Participant
    Post count: 135

    Please ignore this note…

    #26069

    MM
    Participant
    Post count: 128

    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!

    #26071

    csbeck
    Participant
    Post count: 135

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

    Best of luck. Chris

    #28507

    MM
    Participant
    Post count: 128

    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

    #28976

    csbeck
    Participant
    Post count: 135

    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

    #29025

    MM
    Participant
    Post count: 128

    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.

    #43387

    MM
    Participant
    Post count: 128

    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!

    #43393

    csbeck
    Participant
    Post count: 135

    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.

    #43397

    MM
    Participant
    Post count: 128

    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

    #43400

    csbeck
    Participant
    Post count: 135

    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

    #43403

    MM
    Participant
    Post count: 128

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

     

    #43410

    csbeck
    Participant
    Post count: 135

    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

    #43417

    MM
    Participant
    Post count: 128

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

Viewing 15 posts - 16 through 30 (of 33 total)

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