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>
Related
I am learning web dev and it's my first project working on a "to-do" app.
The li element inside of div classed "tasks" with brown background color seems to be off on the left side. Even in a default setting, the li element takes the whole right hand side but left-hand side starts oddly after few spaces.
What is causing it to act this way and how do I fix it?
I have linked the file as well for clarity.
codepen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do Lists</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>To Do Lists</h1>
<input type="text">
<button>Add</button>
<button>clear</button>
</div>
<div class="tasks">
<ul>
<li>
List 1
<button>Done</button>
<button>incomplete</button>
</li>
<li>
List 2
<button>Done</button>
<button>incomplete</button>
</li>
<li>
List 3
<button>Done</button>
<button>incomplete</button>
</li>
</ul>
</div>
</body>
</html>
.header {
background-color: aqua;
border-style: dashed;
margin: 2% 20%;
text-align: center;
box-sizing: border-box;
padding-bottom: 1rem;
}
.tasks {
background-color: beige;
border-style: solid;
border-width: 10px;
text-align: center;
margin: auto 10%;
}
li {
list-style: none;
margin: .4rem;
background-color: rgb(95, 162, 102);
}
This is because ul has default padding which is causing this behaviour. Every browser has its own default value, though recommended from W3C is 40px. To remove the space you can simply set padding of ul to 0.
ul {
padding: 0;
}
Also for future references, you can use INSPECT ELEMENT to see what's causing this issue so you maybe able to better pin point the root cause and handle things.
Keep learning, keep coding!
ul has default padding to remove the spacing you can add CSS ul padding 0.
.header {
background-color: aqua;
border-style: dashed;
margin: 2% 20%;
text-align: center;
box-sizing: border-box;
padding-bottom: 1rem;
}
.tasks {
background-color: beige;
border-style: solid;
border-width: 10px;
text-align: center;
margin: auto 10%;
}
ul {
padding: 0;
}
li {
list-style: none;
margin: 0.4rem;
background-color: rgb(95, 162, 102);
}
<div class="header">
<h1>To Do Lists</h1>
<input type="text" />
<button>Add</button>
<button>clear</button>
</div>
<div class="tasks">
<ul>
<li>
List 1
<button>Done</button>
<button>incomplete</button>
</li>
<li>
List 2
<button>Done</button>
<button>incomplete</button>
</li>
<li>
List 3
<button>Done</button>
<button>incomplete</button>
</li>
</ul>
</div>
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 }
As my title suggests, my content goes off screen.
I've looked through my css file, and there's isn't any margins with minus something. So why is the content going off screen at both sides?
Appreciate any suggestions to why this is.
Thanks.
body{
background: linear-gradient(rgb(100,50,50), rgb(80,20,20)) no-repeat;
color: white;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
img{
margin: 1%;
}
/*Header*/
header {
background-color: #1d1e21;
height: 100vh;
position: relative;
}
header span {
color: #fff;
}
header input {
margin-top: 20px;
}
p#slogan {
color: #fff;
letter-spacing: 2px;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
padding: 0 0 0 10px;
}
ul li a {
color: #fff;
list-style-type: none;
}
ul li a:hover {
color: black;
list-style-type: none;
text-decoration: none;
}
/*Main*/
/*sloganAndSocial*/
#sloganAndSocial {
background-color: #1d1e21;
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NBC 2011</title>
<link rel="stylesheet" href="css/main.css" type="text/css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
<!--Header section-->
<header>
<div id="topBar">
<div class="row">
<h1 class="pull-left"><span>NORDIC </span>BARISTACUP</h1>
<form class="pull-right">
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div class="row">
<p class="pull-left" id="slogan">be together act together learn together</p>
<ul class="pull-right">
<li>ABOUT NBV</li>
<li>2011 EVENT</li>
<li>NORDIC ROASTER</li>
<li>RESULTS</li>
<li>LINKS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!--Main section-->
<div class="main">
<img src="" alt="bo!" class="cover" />
</div>
<div id="sloganAndSocial">
<div class="container">
<div class="row">
<h2 class="pull-left">"To create an environment in which knowledge<br>about coffee and its sphere can be obtained"</h2>
<ul class="share-buttons">
<li><img alt="Share on Facebook" src="images/flat_web_icon_set/inverted/Facebook.png"></li>
<li><img alt="Tweet" src="images/flat_web_icon_set/inverted/Twitter.png"></li>
<li><img alt="Share on Google+" src="images/flat_web_icon_set/inverted/Google+.png"></li>
<li><img alt="Pin it" src="images/flat_web_icon_set/inverted/Pinterest.png"></li>
<li><img alt="Send email" src="images/flat_web_icon_set/inverted/Email.png"></li>
</ul>
</div>
</div>
</div>
</header>
<!--Section1-->
</body>
</html>
You have two divs in your topBar with class row but which are not inside an element with class container. That is not intended by Bootstrap and therefore leads to unintended behaviour. You have to wrap those two divs in another div with class container.
Also, as #nik_m mentioned: Why are you wrapping the whole page in a header? That's not, what headers are supposed to do.
Remove pull-left and pull-right classes from the elements and better use flexbox for your alignments. It will make your life much easier!
Also, why the wrapper of the whole site is inside a header???
I am trying to style a web page using css. For some reason my header does not spread over where the header should be, which means the width is not 100%. it looks like this now this is the screenshot
header {
width: 100%;
}
#logo_picture {
margin-left: 80px;
}
#logo img,
#logo nav {
float: left;
}
#logo nav {
line-height: 120px;
margin-left: 250px;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline;
}
nav a {
color: black;
font-size: 20px;
font-family: 'Arsenal', 'sans-serif';
font-weight: 300;
padding: 2px 38px;
text-decoration: none;
}
nav a,
nav a:visited {
color: black;
}
nav a.selected,
nav a:hover {
color: grey;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Larry Rosenburg Official Website</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<img src="lincoln.jpg" width="30%" alt="Lincoln logo" id="logo_picture">
<nav>
<ul>
<li> Home
</li>
<li> Lincoln
</li>
<li> About
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<h1> Larry Rosenburg </h1>
<p>
I believe that as important as skills and experiences are in our professional careers, it is the relationships that we create which allow us to truly succeed. My company provides title insurance, settlement, escrow and exchange services on a level that
is second to none, but my focus is helping your succeed with your commercial and residential transactions. As a person who can deliver a full range of solutions, I am able to leverage the power of my company with my drive to be concerned with your
company.
</p>
<div id="profile-pic">
<img src="picture.jpg" width="35%" alt="">
</div>
</body>
<footer>
</footer>
</html>
After every float you must create a clear class. Try adding in the CSS:
.clearfix {
clear: both;
}
in the html after the </header> add <div class="clearfix">
I am trying to build a site (just to learn, is not an actual website) and at the top there's links to different sections of the page. The HTML goes as follows:
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li>Airbnb logo</li>
<li>Browse</li>
</ul>
<ul>
<li>Sign Up</li>
<li>Log In</li>
<li>Help</li>
</ul>
</div>
</div>
<div class="header">
<div class="container">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
</div>
</div>
<div class="learn-more">
<div>
<div>
<div>
<h3>Travel</h3>
<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
<p>See how to travel on Airbnb</p>
</div>
<div>
<h3>Host</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p>Learn more about hosting</p>
</div>
<div>
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p>Learn about trust at Airbnb</p>
</div>
</div>
</div>
</div>
</body>
</html>
Now I am trying to style the page, but I want all the elements of the navbar in the same line.
So far I have:
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.header {
background-image:url('http://bit.ly/1KIFZoI');
background-size: cover;
height: 300px;
}
.header h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.header p {
font-size: 20px;
color: #fff;
}
However, the display: inline; still leaves my navbar in two lines. I want them all in the same line if possible not putting all the elements in the same list (same ul)
Thanks!
Just do this:
ul{
display: inline-block;
vertical-align: middle;
}
Beware: you have default padding in the <ul>, because of that you
have a gap between them. Just add padding:0 and/or margin:0to the
<ul> to eliminate the gap ( adjust your needs ).
DEMO HERE