asked on

how to get navigation to "fit" nav bar on various browsers

Navigation extends full width of nav bar in Chrome but not in Firefox. How do I modify navigation so it extends full length for all browsers? I have modified the css but when I make it work in one browser it fails in the other.

Chrome screenshot
https://screencast.com/t/ClkmvqYqmH

Firefox screenshot
https://screencast.com/t/Q6n7svVyp

Beta site
http://pl.triolibraries.com/

.main-navigation-menu a {
    display: block;
  padding: 14px 1.9em;}
  
#navi-wrap {
    border-top: 0px solid #004488;
    border-bottom: 0px solid #004488;
}
  
.main-navigation-menu li:last-child { border: none; }

Open in new window

Julian Hansen

Just looked at the Beta site in Fire fox - renders almost identically to that on chrome

nsitedesigns

ASKER

Site does not sit well on my system in FF. I was upgraded to new version of FF this morning called Quantum. Perhaps that has something to do with it? I tried using a private window and it still sits on left with big margin on right. : (

Julian Hansen

I am on Quantum as well. Works fine. Not a caching issue?

nsitedesigns

ASKER

I don't think it is a caching issue since I am viewing it on a private window which I understand does not have caching problems.

Peter Hart

looks pretty poor on Safari - the menu wraps around depending on the size of the window and its too long even when the window is max'd
I notice you are using the font "Raleway' is that uploaded and being used in the website or do you hop that the device showing the website has the font installed? that may be a problem with displaying.

I notice you use -webkit- controls on the nav CSS

not sure Safari (mac and iPhone, iPads) support them completely

nsitedesigns

ASKER

I notice you are using the font "Raleway' is that uploaded and being used in the website or do you hop that the device showing the website has the font installed? that may be a problem with displaying.
I did not change font setting. It is using default from template

I notice you use -webkit- controls on the nav CSS
Again, I did not install this. Simply using template that client requested.

nsitedesigns

ASKER

Would changing font help site resize better?

Peter Hart

I notice you use -webkit- controls on the nav CSS
Again, I did not install this. Simply using template that client requested.

- even if it doesn't work?

nsitedesigns

ASKER

Not sure how to turn webkit- off since I did not put it on.

Julian Hansen

The -webkit styles are a non-issue - if you look at the stylesheet it includes the generic as well as the -moz, -ms and -o styles.

I just checked again and now both Chrome and FF are showing a gap on the right - did you change something?

Font - this should not make a difference to the the spacing - just the way your font looks.

nsitedesigns

ASKER

I was futzing with it yesterday. Can't remember what I all did now since nothing I did fixed the issue. Will try to look at again today if I have time.

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.

how to get navigation to &quot;fit&quot; nav bar on various browsers

how to get navigation to "fit" nav bar on various browsers