Text-decoration/CSS causing text to move

Question

I've tried a bunch of techniques to solve this. I've used float (left/right) and played with positioning (absolute & relative). None worked.

Basically my navigation keeps moving when the the text decoration (font-weight: bold; in this case) is applied.

I'm new to CSS and this is my first header- so any feedback on the header/site-navigation as a whole is welcome. My second layer nav (ul ul) seems to be lining up vertically, and seems to be using effects from the previous layer. This needs fixing too.

Here is my code:

.main-navigation {
    left:50%;
    transform: translateX(-50%);
    position: absolute;
    padding-top:0em;
    margin: 0px auto;
    z-index: 999;
    border-top: 2px solid;
    border-bottom: 1px solid;
    display: inline-block;
}

.main-navigation-body {
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}

.main-navigation-body ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation-body a {
color:black;
}

.main-navigation-body a:visited {
}

.main-navigation li {
    display: inline-block;
    text-align: center;
    padding:1.64em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    }

.main-navigation a {
    text-decoration: none;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 2.0em;
    left: -999em;
    z-index: 99999;
    background-color:pink;
    width: 100px;
    text-align:left;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul a {

}

.main-navigation ul ul li {
display: inline-block;
    border-top: 0px solid;
    border-bottom: 0px solid;
    padding:0.1em;
}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
font-weight: bold;
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
font-weight: bold;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
font-weight: bold;
color: #BB9A69;
}

Here is the website

Thanks,

take a look here http://stackoverflow.com/questions/556153/horiz-css-menu-text-shifting-on-bold-hover — Muhammet, Jun 22 '15 at 11:43

Paracetamol · Accepted Answer · 2015-06-22T13:08:42.060

2

This is normal behaviour: Bold text is wider, thus repositioning the centered text around it.

You could go for a fixed width on all links to prevent this:

.main-navigation a {
    text-decoration: none;
    min-width: 6em;
    display: inline-block;
}

edited Jun 22 '15 at 13:08

answered Jun 22 '15 at 11:45

Paracetamol

320
3
19

Thanks- that seems to have done it. Why 6em? Any other flaws in my header design? It's my first and I want to learn to do it properly and clean. – Ycon Jun 22 '15 at 11:55
em is a unit relative to font size, so it's useful to assume a certain word length. We're using the `inline-block` attribute to assign a width while keeping the element in the text flow. Because you were asking: I saw your links were jumping a bit due to the extra borders on `:hover`. You could apply transparent borders in the regular state to prevent the pixel jump. – Paracetamol Jun 22 '15 at 13:05

Text-decoration/CSS causing text to move

1 Answers1