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.
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:
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:
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 }
Related
I need to style the nav-tabs by their id. The code for this was working when it had been put in html between bootstrap and css loading, but when moved to base.css only some of this code works (first set of rules).
Please tell me what to do so that all the rules are applied:
HTML
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/base.css" />
<title>Exemplary CSS error</title>
</head>
<body>
<div class ="row" style = "margin-top: 20px; margin-left: 20px">
<ul class="nav nav-tabs" id="timespan-menu">
<li class="nav-item">
<a class="nav-link active" href="#daily">Daily</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#weekly">Weekly</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#monthly">Monthly</a>
</li>
</ul>
</div>
</body>
</html>
CSS
#timespan-menu .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
background: #CBCBCB;
border-bottom: 2px solid #343a40;
}
#timespan-menu .nav-tabs > li.active > a {
font-size: 13px;
color: #212529;
}
#timespan-menu .nav-tabs > li > a {
font-size: 13px;
color: #6c757d;
}
It's because in your CSS your second and third rules are being applied to child elements of the #timestamp-menu element which have the class .nav-tabs, whereas in your markup the #timespan-menu element has the .nav-tabs class itself.
It works if you just remove the spaces between #timespan-menu and .nav-tabs in your rules, e.g.:
#timespan-menu.nav-tabs > li.active > a {
font-size: 13px;
color: #212529;
}
You probably want to tidy your CSS up, though. If you're happy that the styling should be applied by ID then you don't really need to further specify the .nav-tabs class in your second and third rules.
I need help with my horizontal nav-bar that is at the top of my webpage.I am using a CSS animation to make my nav-button's font-size increase on focus and hover. I only want my nav-bar to move when nav-items are focused or hovered. My only problem is that the content beneath the nav-bar moves down when my nav-button is focused or hovered. I only need help with making the content beneath my nav-bar unaffected by the growing font-size of my focused or hovered nav-buttons.
/*NAVBAR CSS STARTS HERE*/
nav {
margin-left: 15%;
}
.navbar {
list-style: none;
padding: 0px;
overflow: hidden;
display: inline;
text-align: center;
}
.navbar li{
display: inline;
}
.nav-link a {
margin-left: 1%;
padding: 14px 30px;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.548);
font-size: 20px;
color: rgb(255, 255, 255);
border-radius: 5px;
font-weight: bold;
letter-spacing: 5px;
}
.nav-link a:hover, .nav-link a:focus {
animation: grow 0.5s;
animation-fill-mode: forwards;
}
/*nav-bar css ends here*/
Here's the HTML below for one of the webpages on my website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="author" content="Maurice Rogers">
<title>My Short Bio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="backgroundImg">
<header id="page-top">
<h1><span>Maurice Rogers</span></h1>
<nav>
<ul class="navbar">
<li class="nav-link"><a class="nav-link"
href="index.html">Bio</a></li>
<li class="nav-link"><a class="nav-link" href="technical-
resume.html">Technical Resume</a></li>
<li class="nav-link"><a class="nav-link" href="my-
animations.html">Animations</a></li>
<li class="nav-link"><a class="nav-link" href="me-
surfing.html">Surfing</a></li>
</ul>
</nav>
</header>
<main>
<br/>
<h2><span>My Bio</span></h2>
<br/>
<div class="box">
<p>I love to code. I find it to be very fun, interesting, and
rewarding. You can <a href="technical-resume.html"
accesskey="t">find my Technical Resume here</a>. I also have other
cool interests. I've spent many hours making animations. You can
<a href="my-animations.html" accesskey="a">view my animations
here</a>. I've been surfing all my life. It really is one of my
favorite things to do. You can <a href="me-surfing.html"
accesskey="s">see me surfing here</a>.</p>
</div>
</main>
<footer>
<nav>
<a class="ftr-nav-link" href="index.html">Back to top</a>
</nav>
<h4 class="copy-right">© 2021 Maurice Rogers</h4>
</footer>
</div>
</body>
</html>
You could try putting a position: absolute on your ul tag and start from there.
I had to modify your code to get the desired result. I used transform: scale() to increase the font-size without affecting the buttons. Apparently if you use display: inline then scale() will not work so I changed around your code and use flexbox properties. Also there were a few issues with your html, you declared the class nav-link on both your a and li, so I removed the class from a. Hope this works for you.
/*NAVBAR CSS STARTS HERE*/
nav {
margin-left: 15%;
}
.navbar {
list-style: none;
padding: 0px;
overflow: hidden;
display: flex;
text-align: center;
}
.nav-link {
margin-left: 1%;
padding: 14px 30px;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.548);
font-size: 20px;
color: rgb(255, 255, 255);
border-radius: 5px;
font-weight: bold;
letter-spacing: 5px;
transition: transform .5s;
}
.nav-link a {
display: block;
color: white;
text-decoration: none;
}
.nav-link a:hover{
transform: scale(1.2);
}
/*nav-bar css ends here*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="author" content="Maurice Rogers">
<title>My Short Bio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="backgroundImg">
<header id="page-top">
<h1><span>Maurice Rogers</span></h1>
<nav>
<ul class="navbar">
<li class="nav-link">Bio</li>
<li class="nav-link"><a href="technical-
resume.html">Technical Resume</a></li>
<li class="nav-link"><a href="my-
animations.html">Animations</a></li>
<li class="nav-link"><a href="me-
surfing.html">Surfing</a></li>
</ul>
</nav>
</header>
<main>
<br/>
<h2><span>My Bio</span></h2>
<br/>
<div class="box">
<p>I love to code. I find it to be very fun, interesting, and
rewarding. You can <a href="technical-resume.html"
accesskey="t">find my Technical Resume here</a>. I also have other
cool interests. I've spent many hours making animations. You can
<a href="my-animations.html" accesskey="a">view my animations
here</a>. I've been surfing all my life. It really is one of my
favorite things to do. You can <a href="me-surfing.html"
accesskey="s">see me surfing here</a>.</p>
</div>
</main>
<footer>
<nav>
<a class="ftr-nav-link" href="index.html">Back to top</a>
</nav>
<h4 class="copy-right">© 2021 Maurice Rogers</h4>
</footer>
</div>
</body>
</html>
I have a portfolio website with a few nav items for different views. I basically copied the default nav code from the bootstrap site. When I expand my "hamburger" the nav remains the same size, hence making the expanded items overlap with the border of my nav. Like this:
I can't seem to find anything on the Bootstrap site to deal with this issue. Does it have to do with my border being there?
Here's my nav code:
.navbar{
height: 10.0rem;
border-bottom: 1px solid rgb(168, 168, 168);
}
.bg-light {
background-color: white !important;
}
.navbar-collapse{
padding-left: 0;
}
#options{
list-style-position: inside;
padding-left: 12rem;
}
#options li{
padding-left: 1rem;
padding-right: 1rem;
font-size: 1.2rem;
font-family: Raleway;
}
li a:hover{
border-bottom: 0.001rem solid black;
}
.navbar-brand{
font-size: 4rem;
padding-left: 3rem;
font-family: Raleway;
font-weight: 400;
}
#header-container {
display: flex;
flex-direction: row-reverse;
justify-content: right;
width: 50%;
height: 50%;
margin: 0 0 0 10%;
padding-left: 30%;
}
html{
height: fit-content;
}
body {
padding-top: 5.0rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alan Alban - Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Alan Alban</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<section id="header-container">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav" id="options">
<li class="nav-item active">
<a class="nav-link" href="/">Experience <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/skills">Skills</a>
</li>
</ul>
</div>
</section>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I appreciate the help in advance
You are only importing the jquery.min.js but you should import the bootatrap.min.js too.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
This is the full script you should place at the bottom of your body, just before the tag ends.
And move your css in your head tag.
Read the official documentation that will help you getting started, most of the answer are always there.
https://getbootstrap.com/docs/4.5/getting-started/introduction/
You can find there also good working examples that will help you getting started in a proper way.
I figured out what the problem was.
.navbar{
height: 10.0rem;
border-bottom: 1px solid rgb(168, 168, 168);
}
That snippet is how I intended to modify the initial width of my navbar. I removed the height property and it works fine now.
My guess is, by setting a height, I'm essentially anchoring the nav to a specific size. I'm gonna try min height and see if that works. it looks good as it is though since I have padding for my nav elements.
i'm having a headache with this problem and i don't know where it's coming from
Basically i'm making this site, ok, everything is working fine until you try it on mobile, it's incredibly small. I've worked using the same methods in other site and this didn't hapenned at all, i didn't had to use meta or any media query, and it's still only a nav menu. So i'm using ul with class row and li with the col-sm-12 and col-md-4 so it works like desired.
That's the pc view
That's the mobile view
All the sizes are in rem and em. The itens are supposed to stack when mobile, and it did, but everything it's super small
The demo:
https://jsfiddle.net/nnhfqL2L/2/
body {
margin: 0;
padding: 0;
border: 0;
background-color: #666;
font-family: 'Roboto', Verdana, Tahoma, sans-serif;
}
/*Header*/
/*Nav*/
nav {
border-bottom: 4px solid #888;
}
nav ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
background-color: #fff;
text-align: center;
font-size: 1.5rem;
}
nav ul li {
display: inline-block;
}
nav ul li a,a:hover {
text-decoration: none;
color: #000;
}
nav ul li section {
padding: 0.8em;
}
nav ul li .menuStrap {
background-color: #000;
height: 3px;
margin: 0 auto;
width: 0;
transition: width 0.2s;
transition-timing-function: ease-out;
}
nav ul li a:hover .menuStrap {
width: 100%;
}
<header>
<nav>
<ul class="row">
<li class="col-sm-12 col-md-3">
<a href="#">
<section>Winpad ★</section>
<div class="menuStrap"></div>
</a>
</li>
<li class="col-sm-12 col-md-3">
<a href="#">
<section>Produtos</section>
<div class="menuStrap"></div>
</a>
</li>
<li class="col-sm-12 col-md-3">
<a href="#">
<section>Sobre</section>
<div class="menuStrap"></div>
</a>
</li>
<li class="col-sm-12 col-md-3">
<a href="#">
<section>Contato</section>
<div class="menuStrap"></div>
</a>
</li>
</ul>
</nav>
</header>
Put this in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
By the way, it is better practice to manually resize your browser window to the wanted size, you can download extensions/plugins for browser to resize your browser window or display current window size.
That is view port issue:
change your view port meta tag to:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimum-scale=1"/>
Try this in <head> part:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" />
or in media query you can use different font sizes for small resolutions..
#media(min-width:480px){html{font-size: 90%}}
Hi I'm struggling the main content to go underneath the fixed header as the user scrolls down.
Instead of the main body going underneath the header as the user scrolls down...
the main body just moves upwards towards the fixed header...and covers it! rather than it disappearing from view behind the fixed header.
I've looked for many examples..they're helpful but doesn't explain why the main content isn't disappearing behind the fixed header...just moving upwards covering the header.
I've tried adding:
position: relative;
But it makes the maincontent disappear.
Thanks.
UPDATED NEW CODE:
index.html
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<!-- <img class="logo" src="img/history_00.png" />
<h7>Building lasting relationships<h7>-->
<ng-controller = "demoCtrl">
<ul class="nav nav-pills pull-left">
<li ng-class="{active: isState('home') }">
<a ui-sref="home">HOME</a>
</li>
<li ng-class="{active: isState('form') }">
<a ui-sref="form">ABOUT US</a>
<li ng-class="{active: isState('form') }">
CANDIDATES
</li>
<li ng-class="{active: isState('jobs') }">
<a ui-sref="jobs">JOBS</a>
</li>
<li ng-class="{active: isState('joinus') }">
<a ui-sref="joinus">JOIN US</a>
</li>
<li ng-class="{active: isState('contact') }">
<a ui-sref="contact">CONTACT US</a>
</li>
</ul>
<h3 class="text-muted"> </h3>
<br>
</div>
</header>
<!--<div class="full-background">-->
<div ui-view class="main"></div>
<!--</div>
</div>-->
<!-- Loading the Footer -->
<div id="footer" ng-include="'partials/footer.html'"></div>
</body>
</html>
<!-- App JS -->
This is more of style.css:
header {
height:10px;
position: fixed;
width:100%;
height:75px;
margin-top:30px;
margin-bottom: 50px;
}
header .nav {
/* float:center;*/
margin: 10px auto 0;
/*position: fixed;*/
/*z-index:1;*/
background: #0783A9;
}
.nav {
background-color:#0783A9 ;
color: white;
/* float:center;*/
}
.nav>li>a {
color: white;
}
.nav-pills>li>a:hover {
color: white;
background: transparent;
cursor: pointer;
background: #cecece;
}
You state
I'm struggling the main content to go underneath the fixed header as
the user scrolls down.
But the CSS:
header .nav {
float:center; /* not a valid setting for float BTW */
margin-top: 10px;
margin-bottom: 0px;
margin-left: 400px;
position: fixed;
z-index:10;
}
means that the nav element is fixed and not the header.
header{
position: fixed;
}
header .nav {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 400px;
}
Is probably what you are after but without a demo it's hard to be 100% certain.
First of all float: centre; doesn't exist in CSS.
I would recommend using the the following to centre you menu. Only because if the users screen is larger or smaller than your own, then it won't appear centred for them.
header .nav {
background: #0783A9;
margin: 10px auto 0;
width: 100%;
}
Adding a background colour to the .nav will stop your content showing through as it is currently transparent.