Tips for maintaining the size of child elements within a parent container without affecting the font size in CSS

I have a basic navigation bar setup:

<nav>
 <a href="#">Home</a>
 <a href="#">About</a>
 <a href="#">Register</a>
</nav>

Along with the CSS styling for the navigation and anchor tags:

nav
{
    background-color:black;
    color:white;
    text-align:center;
    font-size:150%;
    padding:2%;    
}
nav a
{
    text-decoration:none;
    color:white;
    padding:2%;    
}
nav a:hover
{
    background-color:white;
    color:black;
    font-size:120%;            
}

Everything looks good except that the nav container stretches when hovering over it due to the larger font size. How can I prevent this stretching effect on hover?

htmlcss

Answer №1

Check out this sleek and simpler alternative. Give it a try! 

nav
{
    background-color:black;
    color:white;
    text-align:center;
    font-size:150%;   
}
nav a
{
    text-decoration:none;
    color:white;
    padding:2%;    
    display:inline-block;
}
nav a:hover
{
    background-color:white;
    color:black;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform:scale(1.2);
}

Answer №2

Including a "line spacing" property ensures the size of the main container remains consistent.

header h1
{
    line-height: 10%;
    text-decoration:none;
    color:black;
    padding:3%;    
}

Answer №3

Try using alternative values rather than using the % symbol.

Answer №4

To see the changes made to the code, click on this link: https://codepen.io/polinq/pen/xxbgZOM The main modifications include setting a specific height for the navigation element, eliminating padding, and using flex to center it.

nav
{
    background-color:black;
    color:white;
    text-align:center;
    font-size:150%;

    height: 70px;
    display:flex;
    align-items: center;
    justify-content: center;

}
nav a
{
    text-decoration:none;
    color:white;
    padding:2%;    
}
nav a:hover
{
    background-color:white;
    color:black;
    font-size:120%;  

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a stylish accordion in asp.net with custom arrow buttons using CSS

Can anyone help me find the proper CSS for an asp.net ajax accordion menu with a vertical orientation that includes arrow buttons on each pane? I need the arrows to change when the menu is expanded versus collapsed. ...

asp.netcssajaxajaxcontroltoolkitaccordion

What is the best way to create a four-column layout using only CSS when the widths of the columns will vary?

I am looking to create a four-column layout using only CSS, where the width of the columns will adjust responsively. To better understand my issue, take a look at the code snippet below: .row { width: 100%; display: table; } .col { display: table ...

htmlcss

Is there a way to customize this JQuery and HTML code to be specific to each row?

https://i.sstatic.net/RwuMl.pngIn CB UserList, each row in the form appears multiple times representing different records. The below code is intended to display a submit button and modules for show/hide functionality separately for each record on the list. ...

htmljquery

Achieve the positioning of a Bootstrap navbar within a div without it getting wrapped by following

I have been attempting to overlay my navbar on top of a background image by nesting it within a div and using absolute positioning. However, I've run into an issue where the navbar-header/navbar-brand section causes the rest of the navbar to wrap onto ...

htmlcsstwitter-bootstrap

How can buttons be placed dynamically next to each other using Bootstrap?

I currently have the following code snippet: <div class="button-box col-lg-12"> <a href="mylink.php" class="btn btn-info" role="button">About Us</a> <a href="mylink.php" class=& ...

csstwitter-bootstrapbootstrap-4

Altering the properties of every item within a v-for loop's array

I'm currently exploring Vue's approach to writing JavaScript. Let's consider this situation: In the .vue template <button v-on:click="biggerFont()" class="btn btn-s btn-default" type="button" name="button">A</button> < ...

javascriptcsseventsvue.js

Where is the best place to insert Javascript code in an HTML file - the head or body section?

I am currently developing a search engine and have implemented code to automatically redirect users from HTTP to HTTPS when they visit my site. The only question I have is whether I should place this code in the head or body section of my webpage. if(wind ...

javascripthtml

Interactive canvas artwork featuring particles

Just came across this interesting demo at . Any ideas on how to draw PNG images on a canvas along with other objects? I know it's not a pressing issue, but I'm curious to learn more. ...

javascriptjquerycsshtml

Displaying and concealing a subcomponent within a parent element for a set duration of time

I have a notification component that is displayed as a child component in the parent component after a button click. It automatically hides after a certain number of seconds. Here is the code I have developed: MyCode Parent component: <button (click)= ...

javascripthtmlcssangulartypescript

How to Populate Radio Buttons in HTML with Data from a MySQL Database

I am seeking assistance with a PHP and MySQL project since I am new to these technologies. Any help would be greatly appreciated! I have created a second table that contains inventory information. This table includes two columns: Manufacturer and Item. O ...

phphtmlmysqldatabaseradio-button

Preventing Javascript Pop Up from automatically jumping to the top of the page

Upon clicking a button (refer to image below and take note of the scroll bar position), a div pop up is triggered through Javascript. View image: https://docs.google.com/file/d/0B1O3Ee_1Z5cRTko0anExazBBQkU/preview However, when the button is clicked, the ...

javascriptjqueryhtmlcss

Troubles with Bootstrap's column functionality causing issues

Trying to create a menu using Bootstrap, but experiencing issues with the 'col' class not working correctly. Here is the sample HTML code provided: <div class="logo col"> <a href="index.html"><img src="C ...

htmlcssmenubootstrap-5

Error in Javascript caused by the use of Jquery's "hide on load" feature

Looking for help with creating a menu where the subitems disappear when the page loads. If you require the full HTML code, I can provide it, but essentially it consists of several DIVs, with the items under headers having a class of subitems. I was able ...

jqueryhtmlsyntax

Whenever I try to open my jQuery UI Dialog without first displaying an alert, it does not work

Beginning of my HTML page, initializing a dialog : <script type="text/javascript"> $(function() { $( "#dialog-confirm" ).dialog({ autoOpen: false, resizable: true, height:180, width:300, modal: true, buttons: { "Yes": ...

javascriptjqueryhtmljquery-uidialog

Expand the sibling html element to fill the entire parent container with css styling

Hey there! I recently ran the code below in this online sandbox and noticed that the elements ".title-wrap" and ".bg-wrap" are showing up next to each other. Do you know of a way to adjust the code so that ".bg-wrap" automatically fills the entire space of ...

csshtmlformattingsiblings

Is the menu not appearing in the header section of the HTML/CSS?

Hey there, I'm a new student diving into the world of HTML/CSS. I've been working on creating a page layout, but for some reason my menu links are appearing under the header section instead of within it. I'm a bit confused and could really u ...

htmlcsscss-selectors

Most efficient method for revealing all concealed divs using JavaScript

I have a large div containing multiple hidden divs that can be displayed individually or all at once. Here is an example of how it's structured: <div class="maindiv"> Print "<a href=javascript:show()>Click here to show all</a> ...

javascripthtmlcss

CSS - Ensuring the second line of text in ul/ol li does not extend further left than the first line

My website features several lists that have this format: > lorem ipsum I am trying to style them like this: > lorem ipsum If anyone can provide guidance on how to rephrase the question I am asking, I would greatly ap ...

htmlcss

The addClass, removeClass, and css functions in jQuery are malfunctioning

I stumbled upon this website and I am looking to switch the font color from black to white. I attempted various methods but unfortunately, none of them seemed to work: Implementing jQuery's addClass function (to add a class to the SPAN tag) Uti ...

jqueryhtml

Troubles with element alignment

Hello everyone, I am in need of some assistance with HTML and CSS. I am a complete beginner and I am trying to create a design that looks like the one shown below: While I have managed to generate the container itself, I am having trouble with aligning ...

htmlcssalignment