2 replies [Last post]
DanielPMonut
DanielPMonut's picture
Offline
newbie
Last seen: 9 years 28 weeks ago
Timezone: GMT-7
Joined: 2013-03-19
Posts: 2
Points: 5

Hi. I'm having trouble getting my navigation bar to scale well for various browser sizes. Any help would be appreciated.

Right now, the way I've got my nav bar organized is like this:

It works pretty consistently as long as I set a min-width for the container, but obviously any device with a smaller screen width is left with a less-than-optimal screen size. I'd like to avoid that.

If I don't set a min width and I load the page in a smaller browser window (say, the size of many phones) I get something like this:

As you can see, my top-margin setting the line off from the wrapper it's now fallen below, creating an ugly white space.

Ideally, I'd love it if I could get the site to behave by scaling something like this:

Without the white space, or even like this:

Without dropping to the next line, but I've been racking my brain and can't figure out how to make that work without compromising the layout as it stands. Any ideas?

Here's the CSS as it stands:

/*==============================
HEADER WRAPPER
===============================*/
.header-wrapper
{
min-height:118px;
min-width:800px;
background-color:#FFFFFF;
 
}
 
 
.header-logo
{
float:left;
height:118px;
 
}
 
 
.header-menu
{
float:right;
height:118px;
background-color:#FFFFFF;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi DanielPMonut, With a link

Hi DanielPMonut,
With a link this would be fairly easy to fix.
It looks like it will be to do with the height value.
So you will need a media query that targets the smaller screens and adjusts the height, possibly margin or padding also.

Try something like:

@media screen and (min-width: 600px) {
  .header-menu {
     height:auto;
     clear:both;
  }
}

DanielPMonut
DanielPMonut's picture
Offline
newbie
Last seen: 9 years 28 weeks ago
Timezone: GMT-7
Joined: 2013-03-19
Posts: 2
Points: 5

Thanks

Thanks so much! This should take care of it with some fiddling.