I am trying to create an extremely simple navbar. I have added bootstrap to my project as well as my own style sheet. I have included only 1 bootstrap class on my page (I think). I have added a custom hover effect but for some reason, I get the hover animation plus another animation playing with the color changing and other stuff.
Here is how the hover is right now:
No Hover
Hover
I want the text to stay white on hover and not have the black underline.
Here is my code:
HTML/EJS
<head>
<meta charset="utf-8">
<title>Madhose</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/styles.css">
<nav>
Madhose
<ul>
<li>Home</li>
<li>Poems</li>
<li>Recipes</li>
<li>Posts</li>
</ul>
</nav>
<body>
<div class="container-fluid">
<h1>Posts</h1>
<p><%= postText %></p>
<% posts.forEach(function(post){ %>
<h1><%= post.title.substring(0,200) %></h1>
<p><%= post.content.substring(0,200) %>...
Read More</p>
<%}); %>
</div>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.footer-padding {
padding-bottom: 60px;
}
.footer p {
margin-top: 25px;
font-size: 12px;
color: #fff;
}
nav {
width: 100%;
position: fixed;
z-index: 2;
display: flex;
align-items: center;
padding: 0;
margin-top: -7px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
width: 100%;
background-color: rgb(0, 120, 255);
height: auto;
display: flex;
justify-content: flex-end;
}
li a {
color: rgb(235, 222, 222);
text-align: center;
padding: 16px;
text-decoration: none;
font-size: 19px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
align-items: center;
justify-content: flex-end;
display: block;
}
li a::after {
content: '';
display: block;
width: 0;
height: 2px;
background-color: rgb(235, 222, 222);
transition: width .3s;
}
li a:hover::after {
width: 100%;
transition: width .3s;
}
.logo {
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
font-size: 25px;
font-family: 'Oswald';
display: flex;
z-index: 3;
}
.logo:hover{
color:white;
text-decoration: none;
}
h1{
font-family: 'Oswald';
}
Im almost 100% sure this problem is happening from bootstrap but if its anything else please tell me!
Your styling will only override bootstraps if you have your cascading correctly written. If you use a tool like devtools in chrome and inspect the CSS of an element, you can see that there are multiple levels of CSS targeting an element, but not all are actively applied, as some are overwritten. Your styles may not take precedence if their cascading value does not come out to equal more than Bootstrap's value.
As such, if you want to override the values more consistently, use psuedo-namesapacing:
nav#topNavigation ul li a {}
nav#topNavigation ul li a:hover {}
By adding a unique ID to the element, we are increasing the cascade value for this selector, and our css is applied rather than Bootstrap's.
Related
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
}
nav{
height: 85px;
width: 100%;
z-index:1001;
}
label.logo{
color: rgb(255, 255, 255);
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background: #1b9bff;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
position: fixed;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 0px;
font-weight: bold;
}
nav {
z-index: 1001;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #0082e6;
}
#check:checked ~ ul{
left: 0;
}
}
.vid-background {
z-index: -100;
width:100%;
height:80vh;
overflow:hidden;
position:fixed;
top:0;
left:0;
}
.reg-element {
width:100%;
height:80vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles.css"/>
<title>SnowWarrior Landing Page</title>
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<img src="https://img.icons8.com/ios-glyphs/30/000000/menu--v1.png" alt="menu"/>
</label>
<label class="logo">SnowWarrior</label>
<ul>
<li>Home</li>
<li> Shop</li>
<li> Contact</li>
</ul>
</nav>
<div class="vid-background">
<video autoplay loop muted>
<source src="./assets/winter1.mp4">
</video>
</div>
<section></section>
<div class="reg-element">
<span>Just saying</span>
</div>
</body>
</html>
The video overflowing into the navbar is by choice since that is what I'm trying to achieve. However, when I try to add more div elements with text in there, it shows up behind the video instead of below the video. I'm very new to HTML and CSS (just dived into these two days ago) so I may be doing some things wrong here. But I would be glad if someone could point the right thing out to me.
Edit: Does anyone know how to embed a video into an HTML so it shows on StackOverflow?
This would be my approach:
Using modern layout algorithms such as flexbox&grid rather than absolute positioning hell. Here I have a header with the nav and video as children. The header is a grid where the nav is explicitly set to take up the top section and the video explicitly told to take up the full grid.
Smaller components use flexbox to flex along a single axis, and when out of room, wrap onto a new line to allow the website to be responsive on small screen widths, removing the need for media queries here.
If you don't understand something and want me to update this answer to explain it, drop a comment.
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: montserrat;
}
header {
display: grid;
grid-template: min-content 9fr / 1fr;
width: 100%;
min-height: 80vh;
color: white;
}
nav {
grid-area: 1 / 1 / 2 / 2;
height: min-content;
z-index: 10;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
padding: 1rem;
background-color: #0004;
background-blend-mode: darken;
}
.vid-background {
grid-area: 1 / 1 / 2 / 3;
}
.vid-background>* {
width: 100%;
}
h1 {
font-size: 2rem;
}
nav ul {
flex-basis: max-content;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
nav ul li a {
padding: .5rem 1rem;
border-radius: 3px;
color: inherit;
text-transform: uppercase;
transition: .5s;
}
a:active,
a:hover {
background: #1b9bff;
}
<header>
<nav>
<h1>SnowWarrior</h1>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
<div class="vid-background">
<img src="https://source.unsplash.com/random/800x400">
</div>
</header>
Just saying
This is because you're using position:fixed for everthing at the top, which then sadly makes your next element not care about its existance.
Simply put, if you put position:fixed, and then simply add an div with no position defined, they will not relate to eachother. As I do not know how you wish this to work I cannot fix the code for you, hence I will have to simply inform you about this and hopefully you'll be pointed in the direction you asked for - check position out in some css tutorials.
Display:flex is a good place to start.
On my landing page, with a position: sticky nav bar, The navbar will stay at the top of the page but it does not stay completely stationary while scrolling
Codepen: https://codepen.io/jcrainey/pen/rNGLyOQ
I've tried setting a fixed height to .sticky but it just adds space to the bottom of the navbar. Any thoughts on how to make it stay completely stationary?
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class= "navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
.navbar has inherited margins.
Set a margin: 0 on .navbar and give it a height.
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin: 0;
height: 60px;
}
You should be able to remove the height from .sticky too.
You don't have to adjust the height, or set the top padding. The reason why your navbar was moving is that it will move towards the top until any "explicitly defined" margin, or any "existing margin" is completely gone. You need to only add margin: 0; to your .navbar element in your style-sheet, like in the snippet below.
Just a tip. If you press F12 to open the tools, and find the nav-bar element in the HTML that is rendered in the chrome dev-tools, click on it, and it will show you what youre padding, margin, and border all are set too.
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin-top:0;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
One possibility is to add padding-top: 1px; to .sticky. The reason: The included ul (.navbar) has default top and bottom margins, which are not included in the "sticky" part (aka "collapsing margins"). Adding just one pixel of padding-top to the parent prevents that.
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
padding-top: 1px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class="navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
There are a few things going on here.
1st, you have position: sticky in 2 places: .sticky and .navbar. I removed it from your .navbar. 2nd, your ul is inheriting browser styles. (It's often useful to use a CSS reset to remove these: https://necolas.github.io/normalize.css/.) I removed the margin from your ul and gave it a 1em padding. 3rd, I removed your negative margin on your first li. Is this what you're looking for?
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin: 0;
padding: 1em;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class= "navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
I am fairly new to CSS and I'm trying to make my second website. My problem is that the entire navbar is clickable. The navbar items, on the other hand, is okay and it should have clickable fields.
The navbar should be set on the right side of the screen and it should display (portfolio, about me, contacts, and resume) from left to right.
I have tried messing the setting between "display: inline" and its padding to see if that fixed the issue but I'm still getting clickable fields around the entire navbar. I don't know how to fix this issue.
CSS:
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
background-color: #fff;
overflow: hidden;
}
ul.menu {
padding: 20px 8px;
margin: auto 0px;
color: #fff;
font-family: arial, helvetica, sans-serif;
list-style: none;
cursor: default;
text-align: center;
}
.menu li {
display: inline;
}
.menu a {
text-align: center;
padding: 8px 25px;
background: #fff;
color: #272727;
text-decoration: none;
float: right;
border: 1px solid grey;
border-radius: 80px;
margin: 10px;
}
.menu a:hover {
background: #272727;
color: #fff;
transition: all 0.3s;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Beta Portfolio</title>
<link rel="stylesheet" href="CSS/styles.css">
</head>
<body>
<nav class="main-nav">
<ul class="menu">
<li>Resume</li>
<li>Contacts</li>
<li>About Me</li>
<li>Portfolio</li>
</ul>
</nav>
</body>
</html>
Again, the fields around each of the navbar items should be clickable not the entire navbar section. I'm aware of the jsfiddle website but I'm trying not to alter my style too much because I might not like the end result.
[EDIT]
Here is the revised CSS code with minor changes:
CSS (New):
ul.menu {
padding: 20px 8px;
margin: auto 0px;
color: #fff;
font-family: arial, helvetica, sans-serif;
list-style: none;
cursor: default;
text-align: center;
float: right;
justify-content: space-between;
}
.menu li {
display: inline-block;
background: red;
}
.menu a {
text-align: center;
padding: 8px 25px;
background: #ccc;
color: #272727;
text-decoration: none;
border: 1px solid grey;
border-radius: 80px;
margin: 10px;
display: inline-block
}
Padding is clickable in anchors. Use margin instead. Display: inline-block is a mess when items are floated.
li a {margin: 15px; line-height: 40px;} /* just text clickable */
OR
li a {margin: 15px 0; padding: 0 15px; line-height: 40px;} /* text and left/right neighborhood clickable */
See this JSFiddle to see the differents. 1st is your code, 2nd and 3rd are my variants used in the answer. Red background shows you what area is clickable.
With a few suggestions from the community, the final CSS code is the following: (its the same as the [EDIT] version, but I'll post it here just in case)
ul.menu {
padding: 20px 8px;
margin: auto 0px;
color: #fff;
font-family: arial, helvetica, sans-serif;
list-style: none;
cursor: default;
text-align: center;
float: right;
justify-content: space-between;
}
.menu li {
display: inline-block;
background: red;
}
.menu a {
text-align: center;
padding: 8px 25px;
background: #ccc;
color: #272727;
text-decoration: none;
border: 1px solid grey;
border-radius: 80px;
margin: 10px;
display: inline-block
}
You have set the cursor to look like it's clickable.
ul.menu {
cursor: pointer;
}
This will always make it look like it is clickable. Just get rid of that completely or use default instead.
ul.menu {
cursor: default;
}
Check this out to look at the different types of cursors
When I zoom my page in and out it works, but homepage button loses its color, it doesn't expand to the right side.
So I have 2 aims:
1) To center selected area (on the picture allotted by red color).
2) To have homepage's green color expanded to the right to the end of the page.
Sorry for my English. Ask me if I didn't make the question clear.
what I'm trying to do
what I have
what makes me cry
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Infusion</title>
<link rel="stylesheet" type="text/css" href="infusion.css">
<meta charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul class="unlist">
<li class="homepage"><p class="parhome">infusion</p></li>
<li class="nav-elements">design folio</li>
<li class="nav-elements">services</li>
<li class="nav-elements">our business</li>
<li class="nav-elements">how we help</li>
<li class="nav-elements">take the tour</li>
<li class="nav-elements">contact</li>
</ul>
</div>
</body>
</html>
CSS Code
body, html {
margin: 0;
padding: 0;
}
.navbar {
width: 2000px;
margin: 0 auto;
}
.unlist {
display: flex;
margin: 0;
padding: 0;
}
.homepage {
background-color: #63C6AE;
display: inline-block;
list-style: none;
width: 360px;
height: 70px;
color: white;
font-size: 25px;
text-align: right;
vertical-align: middle;
line-height: 75px;
}
.parhome {
height: 50px;
padding: 0;
margin-right: 30px;
margin-bottom: 0;
margin-top: 0;
}
.parhome:hover {
color: #586165;
}
.unlist.a:first-child {
width: 148px;
}
.nav-elements {
display: inline-block;
list-style: none;
height: 70px;
padding-right: 25px;
padding-left: 25px;
text-align: center;
vertical-align: middle;
line-height: 70px;
}
.unlist a {
text-decoration: none;
color: #63C6AE;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-weight: bold;
}
.inlist, a:hover {
color: #586165;
}
It's not valid HTML to put a p tag into an li element. You can use a span instead.
Apart from that, you are limiting the width of your navbar with this CSS rule .navbar { width: 2000px; [...] }.
So when you zoom out, those 2000px (on a large monitor at full screen view) are less than what the window shows (zoomed!), therefore the green area's left border starts where those zoomed 2000px start.
You might want to change the navbar width setting to 100%.
Different approaches can be used to achieve what you want. But all of these approaches that i can think of, need a little bit hack. Meaning, the solution that i am posting here is not an elegant way of handling things.
The reason for that, is what you aim consists of two things.
Center the navbar
Make the homepage container fill with green to all the way left.
Trying to solve both, creates some conflicts which are not easy to solve. And especially if you also want your page to be responsive.
Before start as #Johannes stated, your code consists of elements which are not valid, therefore i tried to change your code a little bit, as much as i could.
So here is my approach:
body, html {
margin: 0;
padding: 0;
}
.navbar {
width: 100%;
padding: 0;
}
.cont {
width: 1280px;
display: flex;
margin: 0 auto;
height: 70px;
}
.unlist {
display: flex;
margin: 0;
padding: 0;
}
.homepage {
background-color: #63C6AE;
display: inline-block;
list-style: none;
width: 360px;
height: 70px;
color: white;
font-size: 25px;
text-align: right;
vertical-align: middle;
width: 1200px;
margin: 0;
margin-left: -950px;
}
ul.homepage a {
color: #fff;
}
.parhome {
height: 50px;
padding: 0;
margin-right: 30px;
margin-bottom: 0;
margin-top: 0;
}
.parhome:hover {
color: #586165;
}
.unlist.a:first-child {
width: 148px;
}
.nav-elements {
display: inline-block;
list-style: none;
height: 70px;
padding-right: 20px;
padding-left: 20px;
text-align: center;
vertical-align: middle;
line-height: 70px;
}
.unlist a {
text-decoration: none;
color: #63C6AE;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-weight: bold;
}
.inlist, a:hover {
color: #586165;
}
<link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet">
<div class="navbar">
<div class="cont">
<ul class="homepage">
<li class="nav-elements parhome">infusion</li>
</ul>
<ul class="unlist">
<li class="nav-elements">design folio</li>
<li class="nav-elements">services</li>
<li class="nav-elements">our business</li>
<li class="nav-elements">how we help</li>
<li class="nav-elements">take the tour</li>
<li class="nav-elements">contact</li>
</ul>
</div>
</div>
NOTE: You can play with numbers, such as margin-left and width for exact results.
I have a navbar on my webpage, I have also got information on my webpage. When I remove the information (paragraph and headings) the navbar functions perfectly. However when I place the information back, the navbar doesn't work whatsoever. Why does a website do this? Thanks.
JSFiddle - With Information
JSFIDDLE - Without Information
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<title>CSGOMarble</title>
</head>
<body>
<h3 style="float: right; margin-right: 25px;">SIGN IN WITH STEAM</h3>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<hr>
<div class="navbar">
<ul>
<li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li>
<li>COINFLIP</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="container">
<h2>CSGOMarble</h2>
<u><h3 style="font-size: 20px; margin-right: 750px; margin-top: 75px;">What is CSGOMarble?</h3></u>
<p style="font-size: 15px; margin-left: 478px; margin-right: 1000px; margin-top: 25px; text-align: justify;">CSGOMarble is a website which enables you to gamble your Counter-Strike skins so that you can try and turn a profit. We have many gamemodes, such as Coinflip, Roulette and Jackpot. Why not SIGN IN to test your luck?</p>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
}
a {
text-decoration: none;
color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 175px;
background-color: #f1f1f1;
border: 2px solid #555;
}
li a {
display: block;
color: #000;
padding: 12px 0 12px 0;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
When you added position fixed to container , you can add z-index on both container and nav divs for fix this in your way as you want.
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
z-index: 2;
position: fixed;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
z-index: 1;
}
Change this Css Hope it helps
Do not use position:fixed unless you want the element to NOT SCROLL with the page. This css settings is great for headers (navbars) that remain fixed to the screen/window and are always visible.
The other one that is similar to position:fixed is position:absolute, except that it will scroll up as the user scrolls down the page. However, both absolute and fixed allow you to use top left right bottom to precisely position the element on the screen. (One tip: the parent element must be either position:absolute or position:relative (relative is common).
Change position:fixed to position:relative for the <div class="container">