My navbar and code looks fine when I’m on a PC and above 980px.
Here’s the example
When I go below 980px I get an “undefined” but I don’t have code in my original html to change this. Where can I adjust this? Can I add content: ‘Insurance’; in the css section of the code? I can adjust the word in the inspect tool but unsure of where to add/fix this in my actual html code.
Here’s my original PC view of the nav bar
<!-- Nav -->
<nav id="nav">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<!-- Personal -->
<li>
<a href="#">Personal Insurance</a>
<ul>
<li><a href="#">Health</a></li>
<li><a href="#">Life</a></li>
<li>
<a href="#">Home & Auto</a>
<ul>
<li><a href="#">Home Owners</a></li>
<li><a href="#">Auto Insurance</a></li>
</ul>
</li>
</ul>
</li>
<!-- Business -->
<li>
<a href="#">Business Insurance</a>
<ul>
<li><a href="#">Health</a></li>
<li><a href="#">Commerical</a></li>
<li>
<a href="#">Assets</a>
<ul>
<li><a href="#">Property Insurance</a></li>
<li><a href="#">Auto Insurance</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
Here is the media code that is linked to the “undefined” section of my code:
#titleBar .title {
display: block;
position: relative;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 1.25em;
line-height: 44px;
color: #fff;
z-index: 1000;
text-align: center;
}