Text next to the menu moving the menu when more text is added

Question

i want to make my text on the left side of the menu not interact with my menu. Every time I add text to it, it moves my menu bars to the side. Any idea how to fix it? I tried fixed position for the text but its buggy and doesn't work in Mozilla Firefox.

JsFiddle: https://jsfiddle.net/3vetp3y3/

HTML:

<nav>
<span class="nadpis"> <a href="javascript:history.go(0)">BUR</a> </span>
<ul class="nav">
<li class="prve"><a href="#">PSI</a>
  <ul>
    <li><a href="flvmena/meno1.html">Simoncik</a></li>
    <li><a href="flvmena/meno2.html">Kodrla</a></li>
    <li><a href="flvmena/meno3.html">Vajs</a></li>
    <li><a href="flvmena/meno4.html">Hrebicek</a></li>
  </ul>
 </li>
 <li class="druhe"><a href="#">&#9776</a>
  <ul>
    <li> <a href="index.html">RPO</a> </li>
    <li> <a href="flv.html"> FLV </a>
      <ul>
        <li><a href="flvmena/meno1.html">Simoncik</a></li>
        <li><a href="flvmena/meno2.html">Kodrla</a></li>
        <li><a href="flvmena/meno3.html">Vajs</a></li>
        <li><a href="flvmena/meno4.html">Hrebicek</a></li>
      </ul>
    </li>
    <li> <a href="flc.html"> FLC </a>
      <ul>
        <li><a href="flcmena/meno1.html">Bednarikova</a></li>
        <li><a href="flcmena/meno2.html">Dobrikova</a></li>
        <li><a href="flcmena/meno3.html">Duracka</a></li>
      </ul>
    </li>
    <li> <a href="qua.html"> QUA </a>
      <ul>
        <li><a href="quamena/meno1.html">Klco</a></li>
        <li><a href="quamena/meno2.html">Cisar</a></li>
      </ul>
    </li>
    <li> <a href="hfx.html"> HFX </a>
    </li>
    <li> <a href="pdt.html"> PDT </a>
    </li>
    <li> <a href="rsh.html"> RSH </a>
    </li>
    <li> <a href="bur.html" style="background-color:#474646;color: #40d23b"> BUR </a>
    </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;
}

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;
}

.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;
width: 250px;
}

.nav li {
 position: relative;
}

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

.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;
}

Could you please add the text to your fiddle and link that version as well so we can see where you are trying to put the text that is creating an issue? — JBartus, Aug 10 '16 at 02:04

Jacob Goh · Accepted Answer · 2016-08-10T02:20:21.130

1

use position: absolute instead of float

span.nadpis {
    position: absolute;
    left: 0;
}

with float, the element will still own an amount of space which will affect its sibling elements

with position: absolute, the element would position itself separately from its sibling elements

edited Aug 10 '16 at 02:20

answered Aug 10 '16 at 02:04

Jacob Goh

19,800
5
53
73

Text next to the menu moving the menu when more text is added

1 Answers1