How to make your header / top nav always show?

[MM]

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

[csbeck]

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

[MM]

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.

[MM]

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!

[csbeck]

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.

[MM]

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

[csbeck]

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

[MM]

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 😉

 

[csbeck]

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

[MM]

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

[csbeck]

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

[MM]

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

[csbeck]

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