Menu different in chrome browser

Question

for some reason my menu bar (its fixed) is in 2 lines in chrome browser and normal in all other browsers. Any idea why or how to fix it? I tried to figure it out but i didnt fix it. Is it a problem with browser default block height or what? I need to make it work on chrome and on all other browsers too.

JsFiddle: https://jsfiddle.net/wkupr9L6/1/

HTML:

  <script>
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 65) {
        $("nav").css("opacity", "0.2");
}
     else {
        $("nav").css("opacity", "1");
    }   
});

  </script>
 </head>

 <body>
<!--MENU BAR!-->
  <nav class="navig">
  <span class="nadpis"> <a href="javascript:history.go(0)"> RPO </a> </span>
   <ul class="nav">
    <li class="prve"><a href="#">Dátumy</a>
     <ul>
      <li><a href="#">1-7/7/2016</a>
       <ul>
        <li><a href="#172016">1/7/2016</a></li>
        <li><a href="#272016">2/7/2016</a></li>
        <li><a href="#372016">3/7/2016</a></li>
        <li><a href="#472016">4/7/2016</a></li>
        <li><a href="#572016">5/7/2016</a></li>
        <li><a href="#672016">6/7/2016</a></li>
        <li><a href="#772016">7/7/2016</a></li>
       </ul>
      </li>
      <li><a href="#">8-14/7/2016</a>
       <ul>
        <li><a href="#872016">8/7/2016</a></li>
        <li><a href="#972016">9/7/2016</a></li>
        <li><a href="#1072016">10/7/2016</a></li>
        <li><a href="#1172016">11/7/2016</a></li>
        <li><a href="#1272016">12/7/2016</a></li>
        <li><a href="#1372016">13/7/2016</a></li>
        <li><a href="#1472016">14/7/2016</a></li>
       </ul>
      </li>
      <li><a href="#">15-21/7/2016</a>
       <ul>
        <li><a href="#">15/7/2016</a></li>
        <li><a href="#">9/7/2016</a></li>
        <li><a href="#">10/7/2016</a></li>
        <li><a href="#">11/7/2016</a></li>
        <li><a href="#">12/7/2016</a></li>
        <li><a href="#">13/7/2016</a></li>
        <li><a href="#">14/7/2016</a></li>
       </ul>
      </li>         
     </ul>
    </li>
    <li class="druhe"><a href="#">&#9776</a>
     <ul>
      <li> <a href="flv.html"> FLV </a> 
       <ul>
        <li><a href="flvmena/meno1.html">meno1 </a></li>
        <li><a href="flvmena/meno2.html">meno2 </a></li>
        <li><a href="flvmena/meno3.html">meno3 </a></li>
        <li><a href="flvmena/meno4.html">meno4 </a></li>
        <li><a href="flvmena/meno5.html">meno5 </a></li>
       </ul>
      </li>
      <li> <a href="flc.html"> FLC </a> 
       <ul>
        <li><a href="flcmena/meno1.html">meno1 </a></li>
        <li><a href="flcmena/meno2.html">meno2 </a></li>
        <li><a href="flcmena/meno3.html">meno3 </a></li>
        <li><a href="flcmena/meno4.html">meno4 </a></li>
        <li><a href="flcmena/meno5.html">meno5 </a></li>
       </ul>
      </li>
      <li> <a href="qua.html"> QUA </a> 
       <ul>
        <li><a href="quamena/meno1.html">meno1 </a></li>
        <li><a href="quamena/meno2.html">meno2 </a></li>
        <li><a href="quamena/meno3.html">meno3 </a></li>
        <li><a href="quamena/meno4.html">meno4 </a></li>
        <li><a href="quamena/meno5.html">meno5 </a></li>
       </ul>
      </li>
      <li> <a href="hfx.html"> HFX </a> 
       <ul>
        <li><a href="hfxmena/meno1.html">meno1 </a></li>
        <li><a href="hfxmena/meno2.html">meno2 </a></li>
        <li><a href="hfxmena/meno3.html">meno3 </a></li>
        <li><a href="hfxmena/meno4.html">meno4 </a></li>
        <li><a href="hfxmena/meno5.html">meno5 </a></li>
       </ul>
      </li>
      <li> <a href="pdt.html"> PDT </a> 
       <ul>
        <li><a href="pdtmena/meno1.html">meno1 </a></li>
        <li><a href="pdtmena/meno2.html">meno2 </a></li>
        <li><a href="pdtmena/meno3.html">meno3 </a></li>
        <li><a href="pdtmena/meno4.html">meno4 </a></li>
        <li><a href="pdtmena/meno5.html">meno5 </a></li>
       </ul></li>
      <li> <a href="rsh.html"> RSH </a> 
       <ul>
        <li><a href="rshmena/meno1.html">meno1 </a></li>
        <li><a href="rshmena/meno2.html">meno2 </a></li>
        <li><a href="rshmena/meno3.html">meno3 </a></li>
        <li><a href="rshmena/meno4.html">meno4 </a></li>
        <li><a href="rshmena/meno5.html">meno5 </a></li>
       </ul>
      </li>
      <li> <a href="bur.html"> BUR </a> 
       <ul>
        <li><a href="burmena/meno1.html">meno1 </a></li>
        <li><a href="burmena/meno2.html">meno2 </a></li>
        <li><a href="burmena/meno3.html">meno3 </a></li>
        <li><a href="burmena/meno4.html">meno4 </a></li>
        <li><a href="burmena/meno5.html">meno5 </a></li>
       </ul>
      </li>
      <li> <a href="suhrn.html" style="color: #ea9b54">SUHRN</a> </li>
      <li> <a href="inci.html" style="color: #ea9b54"> INCI </a> </li>
      <li> <a href="jira.html" style="color: #ea9b54"> JIRA </a> </li>
      <li> <a href="chgt.html" style="color: #ea9b54"> CHGT </a> </li>
      <li> <a href="task.html" style="color: #ea9b54"> TASK </a> </li>
      <li> <a href="vrs.html" style="color: #ea9b54"> VRS </a> </li>
      </div>
     </ul>
    </li>
   </ul>
  </nav>

CSS:

body, nav ul  {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav {    
  display: inline-block;
  position: fixed;
  width: 100%;
  text-align: center;
  background-color: #111;
  vertical-align: top;
  top: -1px;
  opacity: 1;
  transition: 0.3s;
}

nav:hover {
    opacity: 1!important;
    background-color: #111;
    transition: 0.3s;

}

.nav a {
  display: block; 
  background: #111; 
  color: #fff;
  text-decoration: none;
  padding: 0.7em 1.7em;
  text-transform: uppercase;
  font-size: 85%;
  letter-spacing: 3px;
  position: relative;
}

.nav{  
  vertical-align: top; 
  display: inline-block;
}

.nav li {
  position: relative;
}

.nav > li { 
  float: left; 
  margin-right: 1px; 
} 

.nav li:hover > a { 
  transition: 0.3s;
  background-color:#3a3939;
  color: #40d23b; 
}

 .nav ul {
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  left: -99999em;
  background-color: #000;
  border: 2px solid #81D4FA;
  border-top: none;
}
.nav > li:hover > ul {
  left: auto;
  min-width: 100%;
}

.nav > li li:hover > ul { 
  left: 100%;
  top:-1px;
}

.nav > li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent;  
}

.nav li li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent; 
  right: 10px;
}

.prve{
  max-width:125px;
  min-width: 90px;
  border: 2px solid #81D4FA;
  border-bottom: none;
  border-top: none;
}

.druhe {
  max-width: 14px;
  min-width: 110px;
  border-right: 2px solid #81D4FA;
}
    span {
    float:left;
    margin-left: 3px;
}
span a{
    text-decoration: none;
    color:#2670CF;
    background-color:#111;
    font-family: 'Helvetica Neue', sans-serif; 
    font-size: 30px; 
    font-weight: bold; 
}

Thanks for help

Feel free to ignore this recommendation, but by creating a [JSFiddle](http://jsfiddle.net) of your problem, it'll be far easier for responders to test your code and see what works and what doesn't. — Toby, Jul 24 '16 at 19:34
Appears that .druhe has a max-width of 14px; If you remove it you will get everything on one line. — Richard Chassereau, Jul 24 '16 at 20:32

score 1 · Accepted Answer · answered Jul 24 '16 at 20:33

1

This doesn't seem like a browser issue. You have .nav set to display: inline-block; but nothing on the two inner <li> elements to force them onto the same line.

I added this:

.nav > li { 
  display: inline-block;
}

And it works for me in Chrome. See here:

https://jsfiddle.net/tobyl/wkupr9L6/6/

answered Jul 24 '16 at 20:33

Toby

12,743
8
43
75

It works. Thanks. But still i wonder. How is it possible that it worked on every other browser except chrome? – Fred007 Jul 24 '16 at 21:30
Hard to say.. there's many situations where CSS leaves it up to the browser to decide how best to render elements, but it is strange if it worked in multiple other browsers at the same screen size. – Toby Jul 24 '16 at 21:32
Yeah cross browser compatibility is a real challenge. Ultimately it all depends on the needs of the application you are building. Most internal projects at large companies focus on IE (for security?), but usage statistics show that around 80% of users are using Chrome. Also, here's a link to a discussion about cross-browser issue: http://stackoverflow.com/questions/565641/what-cross-browser-issues-have-you-faced One last thing, You can source caniuse to help with design issues you may face: http://caniuse.com/ – Richard Chassereau Jul 25 '16 at 02:31

Menu different in chrome browser

1 Answers1