Increasing font size for links on hover changes background color size, how to stop this?


Tags: html,css,hyperlink,resize,hover

Problem :

I'm new to html & css so bear with me. I feel it's something simple that I'm missing but I can't out what.

For example, I have a navigation bar like this:

<nav id="navbar">
    <a class="nav" href="#home">Home</a> &#124;
    <a class="nav" href="#link1">Link 1</a> &#124;
</nav>

With css:

#navbar {
    font-family: "Tahoma", Geneva, sans-serif;
    font-size: 18pt;
    text-align: center;
    background-color: rgba(0,0,0,0.75);
    color: white;
    margin:15px;
    padding: 15px;
}

I've set the links font to increase in size and change color when I hover over them:

a.nav:hover {
    color: red;
    font-size: larger;
}

Which works fine, but when i hover over the links the background of my nav bar increases downwards a bit as if to fit my new text size. How can I stop the background from changing size?



Solution :

Set line-height:18pt for your hover, it will stop the anchor increasing it's original height:

a.nav:hover {
  color: red;
  font-size: larger;
  line-height:18pt;
}

Example fiddle


    CSS Howto..

    How to align navigation links after navigation menu is collapsed using bootstrap

    How are the page-break properties in CSS supposed to work?

    Codeigniter Form Validation - Showing Errors Individually problems

    Tag image in svg invisible in FireFox because of using style. How to fix?

    How to keep pure-HTML-&-CSS collapsible panels open when another one is opened?

    how to simplify font import in css

    Responsive design: How to open links in a modal window for desktop browsers, but not on a mobile device?

    How to use JavaScript OnResize with delay or less processing intensive

    How to integrate Thread and

    How to Make a Pentagram with CSS Border Attributes

    How to extend this navigation bar off the page?

    How to display data from a file on website load? [closed]

    How do I get text to wrap to not break out of the box using CSS?

    How Do I Set the condition for a user to have to fill in a Textfield

    How to find unused CSS from rails? deadweight not working [closed]

    How to combine 2 SASS functions as they do almost the same thing just using a different calculation?

    How to vertically center image and text in a block element? [CSS]

    How to display a div as overlay which is hovered by a div which is inside another div?

    how to get this table to work properly?

    How to set content to -webkit-slider-thumb

    How to use css styling in html with multiple directories?

    Dompdf: how to get background image to show on first page only

    same button for show/hide in jquery

    How can i make image size big using css?

    How to expand input field to the right in a header bar

    How to toggle css media queries on and off

    How to set all CSS values to their default? [duplicate]

    How to work with fixed positioning in CSS?

    How to modify wordpress plugin css [closed]

    How Do I Get A Border From YUI GRID Tool?