nrojina0 nrojina0 - 5 months ago 13
HTML Question

font thins when I hover over my navbar

This is how it looks when I'm not hover (like I want it to always look)
This is how it looks thin
I'm working on a site for the family farm. Anyway, I have a header and navbar set up, but when I try to make the navbar be fixed at the top I get this strange effect. The font in the title, address, and navbar all thins for some reason I cannot figure out. Can anybody help?

Here is the code for my css:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* ^Reset style. DO NOT DELETE! */
/*-------------------------------------------------------------------------*/


body{
background-color: #254117;
color: white;
width: 100%;
/*max-width: 960px;*/
margin: 0 auto;
margin-top: 12em; /* ADDED TO MAKE HEADER FIXED*/
}

#header{ /* ADDED TO MAKE HEADER FIXED*/
position: fixed; /* ADDED TO MAKE HEADER FIXED*/
width: 100%; /* ADDED TO MAKE HEADER FIXED*/
top: 0; /* ADDED TO MAKE HEADER FIXED*/
height: 12em; /* ADDED TO MAKE HEADER FIXED*/
background-color: #254117; /* ADDED TO MAKE HEADER FIXED*/
} /* ADDED TO MAKE HEADER FIXED*/

#logo {
font-size: 2em;
width:60%;
display: inline;
float:left;
text-align: center;
font-family: cursive;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}

#address {
width: 31%;
display: inline;
font-family: cursive;
font-size: 1.5em;
float:right;
/*text-align: right;*/
margin-bottom: 1em;
margin-right: 1em;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}

/* ^LOGO AND ADDRESS STUFF */
/*-------------------------------------------------------------------------*/

nav {
width: 99%;
margin: 20px 0.5%;
clear: both;
/*position: fixed;*/
}

nav ul {
list-style: none;
/*overflow: hidden;*/
overflow: auto;
}

nav ul li {
float: left;
width: 16.6666%;
}
/*FFEE2E*/
nav ul li a {
text-align: center;
/*text-shadow: 2px 1px 2px ; include text shadow or no? */
font-family: cursive;
padding: 8px 0;
display: block;
width: 97.5%;
border-top: 4px solid #FFEE2E;
border-right: 4px solid #E5C000;
border-bottom: 4px solid #E5C000;
border-left: 4px solid #FFEE2E;
background-color: #FCD717;
font-size: 1.5em;
}

nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
text-decoration: none;
color: #0000EE;
}

nav ul li a:hover,
nav ul li a:active {
background-color: #FFE424;
border-top: 4px solid #E5C000;
border-right: 4px solid #FFE424;
border-bottom: 4px solid #FFE424;
border-left: 4px solid #E5C000;
border-radius: 0;
}

nav ul li:first-child a {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}

nav > ul li:last-child a {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}

/* ^NAVIGATION BAR - LEVEL 1 */
/*-------------------------------------------------------------------------*/

nav li > ul li{
display: block;
width: 99%;
}

nav li > ul{
display: none;
width: inherit;
}

nav li > ul li:first-child a{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

nav li > ul li:last-child a{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

nav li > ul:last-child a{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

nav li:hover > ul{
display: block;
}

nav li:hover > ul{
position: absolute;
display: block;
}


Here is my html:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="CSS/style2.css">
<title>
Bonlee Grown Farm
</title>

</head>

<body>

<div id="header">

<div id="logo"> Bonlee Grown Farm </div> <div id="address"> 650 Al Davis Road <br> <p style="font-size: 0.1em"> <br> </p> Bear Creek, NC 27514 <p style="font-size: 0.1em"> <br> </p> (012)345-6789 | idontknow@gmail.com </div>

<nav>
<ul>
<li> <a href="BonleeGrownFarm2.html"> Home </a> </li>
<li> <a href="OurStory.html"> Our Story </a> </li>
<li>
<a href="WheretoFindUs.html"> Where to Find Us </a>
<ul>
<li> <a href="Market1.html"> Market1 </a> </li>
<li> <a href="Market2.html"> Market2 </a> </li>
<li> <a href="Market3.html"> Market3 </a> </li>
<li> <a href="Market4.html"> Market4 </a> </li>
</ul>
</li>
<li>
<a href="FromOurFarm.html"> From Our Farm </a>
<ul>
<li> <a href="Plant1.html"> Plant1 </a> </li>
<li> <a href="Plant2.html"> Plant2 </a> </li>
<li> <a href="Plant3.html"> Plant3 </a> </li>
<li> <a href="Plant4.html"> Plant4 </a> </li>
<li> <a href="Plant5.html"> Plant5 </a> </li>
<li> <a href="Plant6.html"> Plant6 </a> </li>
<li> <a href="Plant7.html"> Plant7 </a> </li>
<li> <a href="Plant8.html"> Plant8 </a> </li>
<li> <a href="Plant9.html"> Plant9 </a> </li>
<li> <a href="Plant10.html"> Plant10 </a> </li>
<li> <a href="Plant11.html"> Plant11 </a> </li>
<li> <a href="Plant12.html"> Plant12 </a> </li>
<li> <a href="Plant13.html"> Plant13 </a> </li>
<li> <a href="Plant14.html"> Plant14 </a> </li>
<li> <a href="Plant15.html"> Plant15 </a> </li>
<li> <a href="Plant16.html"> Plant16 </a> </li>
<li> <a href="Plant17.html"> Plant17 </a> </li>
<li> <a href="Plant18.html"> Plant18 </a> </li>
<li> <a href="Plant19.html"> Plant19 </a> </li>
<li> <a href="Plant20.html"> Plant20 </a> </li>
</ul>
</li>
<li>
<a href="FromOurKitchen.html"> From Our Kitchen </a>
<ul>
<li> <a href="Jam1.html"> Jam1 </a> </li>
<li> <a href="Jam2.html"> Jam2 </a> </li>
<li> <a href="Jam3.html"> Jam3 </a> </li>
<li> <a href="Jam4.html"> Jam4 </a> </li>
<li> <a href="Jam5.html"> Jam5 </a> </li>
<li> <a href="Jam6.html"> Jam6 </a> </li>
<li> <a href="Jam7.html"> Jam7 </a> </li>
<li> <a href="Jam8.html"> Jam8 </a> </li>
<li> <a href="Jam9.html"> Jam9 </a> </li>
<li> <a href="Jam10.html"> Jam10 </a> </li>
</ul>
</li>
<li> <a href="CarolinaBabe.html"> Carolina Babe </a> </li>
</ul>
</nav>

</div>

</body>
</html>

Answer

As far as your question, there is nothing wrong with it, the font in navbar doesn't get thinner when it is set to position:fixed as you can see in the snippet below. It looks to me that is an Optical illusion because the font-size and font-weight are the same when hover/not hover, but the colors change and those large borders create the reveal effect.

Comment given from OP

@dippas I'd love to know how you got the scrollbar!

remove width:97.5% from a


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* ^Reset style. DO NOT DELETE! */

/*-------------------------------------------------------------------------*/

body {
  background-color: #254117;
  color: white;
  width: 100%;
  /*max-width: 960px;*/
  margin: 0 auto;
  margin-top: 12em;
  /* ADDED TO MAKE HEADER FIXED*/
}
#header {
  /* ADDED TO MAKE HEADER FIXED*/
  position: fixed;
  /* ADDED TO MAKE HEADER FIXED*/
  width: 100%;
  /* ADDED TO MAKE HEADER FIXED*/
  top: 0;
  /* ADDED TO MAKE HEADER FIXED*/
  height: 12em;
  /* ADDED TO MAKE HEADER FIXED*/
  background-color: #254117;
  /* ADDED TO MAKE HEADER FIXED*/
}
/* ADDED TO MAKE HEADER FIXED*/

#logo {
  font-size: 2em;
  width: 60%;
  display: inline;
  float: left;
  text-align: center;
  font-family: cursive;
  margin-top: 0.5em;
  /*position: fixed;*/
  /*top: 0;*/
}
#address {
  width: 31%;
  display: inline;
  font-family: cursive;
  font-size: 1.5em;
  float: right;
  /*text-align: right;*/
  margin-bottom: 1em;
  margin-right: 1em;
  margin-top: 0.5em;
  /*position: fixed;*/
  /*top: 0;*/
}
/* ^LOGO AND ADDRESS STUFF */

/*-------------------------------------------------------------------------*/

nav {
  width: 99%;
  margin: 0 0.5%;
  position: fixed
}
nav ul {
  list-style: none;
  /*overflow: hidden;*/
  overflow: auto;
}
nav ul li {
  float: left;
  width: calc(100% / 6);
}
/*FFEE2E*/

nav ul li a {
  text-align: center;
  /*text-shadow: 2px 1px 2px ;  include text shadow or no? */
  font-family: cursive;
  padding: 8px 0;
  display: block;
  border-top: 4px solid #FFEE2E;
  border-right: 4px solid #E5C000;
  border-bottom: 4px solid #E5C000;
  border-left: 4px solid #FFEE2E;
  background-color: #FCD717;
  font-size: 1.5em;
}
nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
  text-decoration: none;
  color: #0000EE;
}
nav ul li a:hover,
nav ul li a:active {
  background-color: #FFE424;
  border-top: 4px solid #E5C000;
  border-right: 4px solid #FFE424;
  border-bottom: 4px solid #FFE424;
  border-left: 4px solid #E5C000;
  border-radius: 0;
}
nav ul li:first-child a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
nav > ul li:last-child a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
/* ^NAVIGATION BAR - LEVEL 1 */

/*-------------------------------------------------------------------------*/

nav li > ul li {
  display: block;
  width: 99%;
}
nav li > ul {
  display: none;
  width: inherit;
}
nav li > ul li:first-child a {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
nav li > ul li:last-child a {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
nav li > ul:last-child a {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
nav li:hover > ul {
  display: block;
}
nav li:hover > ul {
  position: absolute;
  display: block;
}
<div id="header">

  <div id="logo">Bonlee Grown Farm</div>
  <div id="address">650 Al Davis Road
    <br>
    <p style="font-size: 0.1em">
      <br>
    </p>Bear Creek, NC 27514
    <p style="font-size: 0.1em">
      <br>
    </p>(012)345-6789 | idontknow@gmail.com</div>

  <nav>
    <ul>
      <li> <a href="BonleeGrownFarm2.html"> Home </a> 
      </li>
      <li> <a href="OurStory.html"> Our Story </a> 
      </li>
      <li>
        <a href="WheretoFindUs.html"> Where to Find Us </a>
        <ul>
          <li> <a href="Market1.html"> Market1 </a> 
          </li>
          <li> <a href="Market2.html"> Market2 </a> 
          </li>
          <li> <a href="Market3.html"> Market3 </a> 
          </li>
          <li> <a href="Market4.html"> Market4 </a> 
          </li>
        </ul>
      </li>
      <li>
        <a href="FromOurFarm.html"> From Our Farm </a>
        <ul>
          <li> <a href="Plant1.html"> Plant1 </a> 
          </li>
          <li> <a href="Plant2.html"> Plant2 </a> 
          </li>
          <li> <a href="Plant3.html"> Plant3 </a> 
          </li>
          <li> <a href="Plant4.html"> Plant4 </a> 
          </li>
          <li> <a href="Plant5.html"> Plant5 </a> 
          </li>
          <li> <a href="Plant6.html"> Plant6 </a> 
          </li>
          <li> <a href="Plant7.html"> Plant7 </a> 
          </li>
          <li> <a href="Plant8.html"> Plant8 </a> 
          </li>
          <li> <a href="Plant9.html"> Plant9 </a> 
          </li>
          <li> <a href="Plant10.html"> Plant10 </a> 
          </li>
          <li> <a href="Plant11.html"> Plant11 </a> 
          </li>
          <li> <a href="Plant12.html"> Plant12 </a> 
          </li>
          <li> <a href="Plant13.html"> Plant13 </a> 
          </li>
          <li> <a href="Plant14.html"> Plant14 </a> 
          </li>
          <li> <a href="Plant15.html"> Plant15 </a> 
          </li>
          <li> <a href="Plant16.html"> Plant16 </a> 
          </li>
          <li> <a href="Plant17.html"> Plant17 </a> 
          </li>
          <li> <a href="Plant18.html"> Plant18 </a> 
          </li>
          <li> <a href="Plant19.html"> Plant19 </a> 
          </li>
          <li> <a href="Plant20.html"> Plant20 </a> 
          </li>
        </ul>
      </li>
      <li>
        <a href="FromOurKitchen.html"> From Our Kitchen </a>
        <ul>
          <li> <a href="Jam1.html"> Jam1 </a> 
          </li>
          <li> <a href="Jam2.html"> Jam2 </a> 
          </li>
          <li> <a href="Jam3.html"> Jam3 </a> 
          </li>
          <li> <a href="Jam4.html"> Jam4 </a> 
          </li>
          <li> <a href="Jam5.html"> Jam5 </a> 
          </li>
          <li> <a href="Jam6.html"> Jam6 </a> 
          </li>
          <li> <a href="Jam7.html"> Jam7 </a> 
          </li>
          <li> <a href="Jam8.html"> Jam8 </a> 
          </li>
          <li> <a href="Jam9.html"> Jam9 </a> 
          </li>
          <li> <a href="Jam10.html"> Jam10 </a> 
          </li>
        </ul>
      </li>
      <li> <a href="CarolinaBabe.html"> Carolina Babe </a> 
      </li>
    </ul>
  </nav>

</div>

Comments