Couple Issues With Nav and Div Height

Hi Guys,

Here is site…

http://modocom.ca/Runway25/

One issue I’m having is on Chrome the main nav is on two lines how can this be resolved.

As well with the nav if you resize the window it doesn’t stay nicely lined up with the logo, is there way I can fix this.

I was thinking maybe bringing it out of the header div and not putting on the rotation elements and just having them fixed overtop of the header will work but was wondering is that best way to go about it?

Next issue I’m having is just making the grey content bg color go all way down to bottom of browser window when there is not a large amount of text. Some pages will have more text so it will go all way down and viewers will scroll, but for short lengths of text need to solve that issue.

If theres anything else you see that can improve the functionaliy please let me know. :slight_smile:

Thanks,

Mike

For your nav you can try this:


.nav{margin-right:20%}
.mainnav{margin-right:0}

For the resizing issue with the nav then you should throw in a media query at the point where the nav drops and then perhaps move the slant from the logo and centre the nav and logo in the black section. You will need to adjust a load of things so I can’t give specific code but it would just mean moving things around until they fit more nicely at the smaller width and is more of a design issue than a css one as the css would be straight forward.

For he gray section then perhaps the display:table-cell approach would have given you the full length column more easily but you would need the right structure to start with. Or you could try something like this.


html,body{height:100%}
.content{
min-height:100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

You may have to tweak the widths to get back to the original size.

Thanks Paul,

Still on Chrome shows my menu on two lines but not in FireFox. I would like the menu to line up with the content text to have that visual alignment.

Is this possible?

The grey section now works perfectly thanks :slight_smile:

It is if you add the code I gave you :slight_smile:


.nav{margin-right:20%}
.mainnav{margin-right:0}

Weird works now didn’t at first.

Now on Chrome and FireFox the menu starts in different places on each.

Looking to line it up on all browsers with the other text so The Experience lines up with The Steaklounge on this page…

http://modocom.ca/Runway25/page.html

Sorry my main index page changed cause going to have just image slider there till they get into the site.

When resizing that menu moves and isnt consistent like the footer menu stays lined up thats what I’m looking for if possible so its all aligned if you know what I mean. Might be best to take the menu out of the header what would you suggest?

Thanks,

Mike

You’d need to set a width for the nav to match the right side and remove the margin-right.

e.g.


.nav{margin-right:0;width:48%}

You can’t just throw margin-right:20% and expect it to line up as they are based on different things.