CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
mmm000
mmm000

Reputation: 87

Change hover size in css in bootstrap

I have a navigation bar, and I was wondering if it is possible to change the hover size in bootstrap 4? I want to make the size of the background on the menu links smaller. I have tried this method: How do i change the width of the hover in bs4 , but it does not work for me.

This is my html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Cuppela</title>
    <script src="https://www.cuppela.com/cuppela/js/jquery.min.js" type="text/javascript"></script>
    <script src="https://www.cuppela.com/cuppela/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://www.cuppela.com/cuppela/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/test.css" type="text/css">

</head>
<body>
    <div id="nav-menu">
        <nav id="main-nav" class="navbar navbar-expand-md fixed-top">
            <div class="container">
                <ul class="nav navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Shop</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
        </div>
<div class="container-fluid" id="top-main"> 

    <div id="top_text">
        <h1>Cuppela Made With Sugar</h1>
        <p>Delicious Homemade Cakes</p>
    </div>
    
    </div>
</div>

<div>
    <h2>Test</h2>
</div>
</body>
</html>

This is my css:

body{
    margin: 0px;
}

li a:hover {
    background-color: #ff9900;
    border-radius: 10px;
}

li a{
    color: white !important;
}

#top-main{
    background-image: url(../images/cake_six_two.jpg);
    height: 100vh;
}

#nav-menu{
    font-size: x-large;
    position: relative;
}

#top_text{
    color: white;
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

h1{
    font-size: 500%;
}

p{
    font-size: x-large;
}

h2{
    text-align: center;
}

Edit: Added more description.

Upvotes: 1

Views: 1423

Answers (2)

Zain Shabir
Zain Shabir

Reputation: 310

You didn't clearly mention what you want, but if you want to change the font size, you can simply do font-size: 12px or any pixels you want. If you want to change the anchor tag's width, then you can decrease the padding like .navbar .navbar-nav .nav-item .nav-link { padding: 5px // or anything you want, you can also make it 0 }

Upvotes: 0

anatolhiman
anatolhiman

Reputation: 1859

I suppose you want to change the size of the background on the menu links when you :hover over them. If that is the case, edit the padding of .nav-link (or remove the padding line completely) and you will end up with something like this:

enter image description here

As you can see no padding at all will give the impression of a bit more orange background above the links than below. This is a common quirk with padding in CSS, so I recommend you add for example padding: 0 0 .2rem which translates into zero padding on the top, right and left, and 0.2rem padding at the bottom of the element.

Result will then be: enter image description here

Upvotes: 1

Related Questions