CODEWITHSUNDEEP
htmlcss
user3921613
user3921613

Reputation: 3

Amending Font Size Without Affecting Other Classes

Please see my code below:

HTML =>

<header>
    <div class="menuWrap">
        <a href="" class="menuItem" title="Home">Home</a>
        <a href="" class="menuItem" title="About">About</a>
        <a href="" class="logoItem" title="Adam McCann">AM</a>
        <a href="" class="menuItem" title="Work">Work</a>
        <a href="" class="menuItem" title="Contact">Contact</a>
    </div>
</header>

CSS =>

header {
    width: 100%;
    height: 80px;
    background-color: #F5F5F5;
    border-bottom: 1px solid #E6E6E6;
}

.menuWrap {
    margin: 0 auto;
    width: 80%;
    height: 100%;
    text-align: center;
}

.menuItem {
    line-height: 80px;
    display: inline-block;
    width: 20%;
    color: #1DC0CE;
    text-decoration: none;
    font-family: 'Lobster', cursive;
    font-size: 25px;
    -o-transition: .2s;
    -ms-transition: .2s;
    -moz-transition: .2s;
    -webkit-transition: .2s;
    transition: .2s;            
}

.logoItem {
    line-height: 80px;
    display: inline-block;
    width: 15%;
    background-color: #1DC0CE;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Lobster', cursive;
    font-size: 25px;
    border-bottom: 1px solid #1DC0CE;
    -o-transition: .2s;
    -ms-transition: .2s;
    -moz-transition: .2s;
    -webkit-transition: .2s;
    transition: .2s;        
}

When I am increasing the font-size for 'logoItem' the 'menuItem' elements position is moving (the text is moving down the page)

Any tips on how to stop this!?

Upvotes: 0

Views: 35

Answers (1)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

Give them a uniform height and ensure it's large enough to work for both sizes:

#menuWrap a {
    display:inline-block;
    height:30px;
}

You should probably get rid of the line-height declaration as well.

Upvotes: 1

Related Questions