I can't seem to center the navigation bar buttons. Is there a way to do this in the css file? I have tried centring but it hasn't worked.
HTML
<div class="navbar">
Home
News
Contact
</div>
CSS
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 1300px; /* Full width */
z-index: 99999;
text-align: center;
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Links inside the navbar */
.navbar a {
display:inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
I have modified your style for ".navbar a". Hope it will work for you.
You will love flexbox - super simple, and very useful.
Flexbox requires a parent and items.
You turn flexbox on on the parent, and then the various switches are set either on the parent (as in the case of justify-content) or on the items.
Here is a great cheatsheet for Flexbox.
Here is a fantastic YouTube tutorial.
DEMO:
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
z-index: 99999;
text-align: center;
width: 100vw; /* Full width */
display:flex;
justify-content:center;
border:5px solid yellow;
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border:1px solid pink;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
<div class="navbar">
Home
News
Contact
</div>
You can use
<div class="navbar">
<div style="display: inline-block;">
Home
News
Contact
</div>
</div>
If I understand you correctly, you need to align the links in the center of the navbar, for this you need to do:
CSS:
/* Links inside the navbar */
.navbar a {
/* float: left; remove this property */
display: inline-block; /* change display: block to inline-block */
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
You can see an example on: https://jsfiddle.net/4gy2japx/
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
z-index: 99999;
text-align: center;
margin: 0 auto;
}
.navbar ul {
display:inline-block;
list-style-type: none;
}
/* Links inside the navbar */
.navbar a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="navbar">
Home
News
Contact
</div>
</body>
</html>
You have to remove float left and add display: inline-block;
.navbar a {
float: left;
display: block;
There are several mistakes in your elements styling. Trying to align floated elements, assigning display block to linear links and defining empirical lengths when you're aiming for full lengths are some of them.
Try this instead:
html,body {
margin: 0; /* overwrite browser defaults */
}
.navbar{
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
z-index: 99999;
text-align: center;
}
/* Links inside the navbar */
.navbar a {
display: inline-block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
<div class="navbar">
Home
News
Contact
</div>
Related
I'm trying to make a horizontal navigation bar that has some menu items in a browser but condenses down to a hamburger menu if used on a mobile or other smaller device. I've been having a lot of trouble with actually removing the menu items and adding them to the hamburger menu. Any help would be greatly appreciated.
sample HTML:
<div class="navbar">
First Name
Projects
Resume
About
</div>
sample CSS:
.navbar {
overflow: hidden;
background-color: #ECECEC;
width:100vw;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
border-bottom: 1px solid black;
}
/* Links inside the navbar */
.navbar a {
float: left;
display: flex;
color: #474243;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 150%;
font-family: 'Roboto', sans-serif;
}
.navbar a:nth-of-type(1) {
/* padding-right: 680px; */
color: black;
margin-right: 680px;
padding-left: 50px;
/*background: #777; */
font-size: 200%;
font-family: 'Roboto', sans-serif;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
#media (max-width: 952px){
navbar a{
font-size: 16px;
}
}
You can use the #media query. Here's some examples and guidelines
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I'm trying to create a dropdown menu for one of the items in my nav bar. I based the code on this W3Schools example. Upon hover, the menu appears below the nav bar (as it should be) but it is 1) stacked horizontally rather than vertically and 2) appears to the far right on the page. I've look at similar questions here but haven't been able to figure out the problem in my code. Any help would be appreciated.
/* nav */
nav {
display: flex;
flex-wrap: wrap;
padding: .25rem 0;
color: #ffffff;
font: 30px 'Roboto', sans-serif;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
}
nav a {
display: block;
margin: 0 40px;
}
/* dropdown container */
.dropdown {
float: none;
position: relative;
overflow: visibile;
}
/* dropdown button */
.dropdown .dropbtn {
display: flex;
font-size: 30px;
border: none;
outline: none;
color: #ffffff;
padding: inherit;
background-color: inherit;
font-family: inherit;
margin: auto;
}
/* dropdown content (hidden by default */
.dropdown-content {
display: none;
position: absolute;
margin-top: 10px;
background-color: #ffffff;
width: 250px;
left: calc(50% - 125px);
}
.dropdown-content>a {
color: black;
text-align: left;
border-bottom: 1px solid #009EDB;
}
/* show dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
float: left;
margin: 0;
}
<nav class="justify-content-center">
About
<section class="dropdown">
<button class="dropbtn">
Work
</button>
<section class="dropdown-content">
Articles and Presentations
From Process to Flow Series
</section>
</section>
Github
Trailhead
</nav>
Your dropdown is structured of anchors (links, <a> tags), which naturally are inline elements. That means that naturally these elements are located as part of page or line flow. To make them appear vertical, you need to change them to be "block" elements, which you use by adding display: block to the styling on the dropdown a elements:
nav a {
margin: 0 40px;
display: block;
}
The 'margin' was already present in this particular element.
I've also removed all the "!important" from your styling because it's bad practice and wasn't helping at all. Since you're missing a background, I restyled the triggering element to have red text so it doesn't seem like a random white space was triggering the dropdown.
That being said, I don't see any "styled far right" behavior for the drop down. The menu is displayed directly under the triggering element (with a 40px margin, which if you have a really small screen might make it seem like it's super far right.)
/* nav */
nav {
display: flex;
flex-wrap: wrap;
padding: .25rem 0;
color: #ffffff;
font: 30px 'Roboto', sans-serif;
margin: auto;
justify-content: center;
overflow: hidden;
}
nav a {
margin: 0 40px;
display: block;
}
/* dropdown container */
.dropdown {
float: none;
overflow: hidden;
}
/* dropdown button */
.dropdown .dropbtn {
display: flex;
font-size: 30px;
border: none;
outline: none;
color: red;
padding: inherit;
background-color: inherit;
font-family: inherit;
margin: auto;
}
/* dropdown content (hidden by default */
.dropdown-content {
display: none;
position: absolute;
background-color: inherit;
width: 100%;
}
/* show dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<nav class="justify-content-center">
About
<section class="dropdown">
<button class="dropbtn">Work</button>
<section class="dropdown-content">
Articles and Presentations
From Process to Flow Series
</section>
</section>
Github
Trailhead
</nav>
Problem number 1 was solved through Rody of the Frozen Peas answer.
For Problem number 2:
You want to align the center of dropdown-content relative to it's parent.
For that you want to shift dropdown-content to the left by half of it's width and then shift it a bit to the right by half of the width of the dropdown. Also the dropdown element needs to be relatively positioned otherwise the dropdown-content would be positioned realtive to the document. To make the dropdown-content visible you need to make dropdowns and the nav bars overflow visible.
nav {
overflow: visible;
}
.dropdown {
position: relative;
overflow: visible;
}
.dropdown-content {
position: absolute;
width: 250px;
left: calc(50% - 125px);
}
The reason this works is that you align the center of the dropdown-content with the left of dropdown by specifying left: -125px as you're shifting it to the left by half of the width of dropdown-content. To then align it with the center of dropdown you need to add 50% as it is absolutely positioned and will therefore use the parents width as reference and 50% of the parents width is the parents center.
I have written this codepen for a Top Navbar.
This Top Navbar is a <div> element containing <a> elements:
<div class="topnav">
Home
News
Contact
About
</div>
<h1>TopNav using div and a elements</h1>
The key CSS is as follows:
.topnav {
background-color: #bbb; /* gray */
line-height: 50px; /* same as height! */
}
.topnav a {
height: 50px;
margin: 0;
padding: 15px 20px;
color: black;
text-decoration: none;
}
I have vertically centered the links in the <div> element, by:
1) giving each link a height of 50px and then
2) giving the wrapping <div> the same line-height.
This works fine.
The problem is that I am unable to precisely control the padding and margin for the links.
Right now, I have given the padding for the links an arbitrary value:
padding: 15px 20px;
However, there is a small gap at the top and bottom of each link, where the Navbar background color shows through. This can be seen when you hover over a link.
When a link is moused over, I would link the link color to cover the entire NavBar. Is there any exact calculation I can make to ensure this, rather than choosing an arbitrary value for padding-top?
Secondly, there is also a gap at the sides of each link when one hovers. It can be clearly seen when one hovers over a link that is on either side of the "active" link (the green one). I would prefer this gap to be eliminated. How can I do this?
By Default a tag is inline element, you should change it display property to display: inline-block. so that you can set margin and padding.
* {
box-sizing: border-box;
}
/* Extra small devices (phones) */
body {
margin: 0;
background-color: powderblue;
}
.topnav {
background-color: #bbb; /* gray */
line-height: 50px; /* same as height! */
}
.topnav a {
margin: 0;
padding: 10px 20px;
color: black;
text-decoration: none;
display: inline-block; /* Set inline-block for a tag */
}
.topnav {
background-color: #bbb; /* gray */
line-height: 50px; /* same as height! */
}
.topnav a.active {
background-color: mediumseagreen;
color: white;
}
.topnav a:hover:not(.active) {
background-color: #f1f1f1; /* light gray */
}
<div class="topnav">
Home
News
Contact
About
</div>
<h1>TopNav using div and a elements</h1>
Use this. I gave display:block to a and display:flex to .topnav
* {
box-sizing: border-box;
}
/* Extra small devices (phones) */
body {
margin: 0;
background-color: powderblue;
}
.topnav {
background-color: #bbb; /* gray */
height:50px;
display:flex;
line-height: 50px; /* same as height! */
}
.topnav a {
display:block;
height: 50px;
margin: 0;
padding: 0px 20px;
color: black;
text-decoration: none;
}
.topnav a.active {
background-color: mediumseagreen;
color: white;
}
.topnav a:hover:not(.active) {
background-color: #f1f1f1; /* light gray */
}
<div class="topnav">
Home
News
Contact
About
</div>
<h1>TopNav using div and a elements</h1>
I am having some trouble with my dropdown menu bar and the dropdown is not aligned properly as well.
Modified code on JSFiddle
HTML
<div class="container">
Home
<div class="dropdown">
<button class="dropbtn">Recipes</button>
<div class="dropdown-content">
Choc Chip Cookie
Choc Brownie
Choc Pretzels
</div>
</div>
Gallery
Contact
</div>
CSS
.container {
overflow: hidden;
background-color: #3399CC;
border-style: solid;
border-color: black;
border-width: medium;
width: 50%;
margin: auto;
text-align: center;
font-family: 'Lobster',cursive;
}
.container a {
float: left;
font-size: 22px;
color: black;
text-align: center;
padding: 10px 14px;
text-decoration: none;
align-content: center;
width: 21%; /* Modified by me to change the width of Home, Gallery and Contact element */
display: block;
}
.dropdown {
float: left;
overflow: hidden;
width: 24%; /* Modified by me to change the width of Recipe element */
}
.dropdown .dropbtn {
font-size: 22px;
border: none;
outline: none;
color: black;
padding: 10px 14px;
background-color: inherit;
font-family: 'Lobster',cursive;
}
.container a:hover, .dropdown:hover { /* Modified by me. Change the background color of dropdown element instead of the button */
background-color: #52C3EC;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #3399CC;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 250px;
}
.dropdown-content a {
float: none;
color: black;
text-align: left;
padding: 10px 14px;
padding-left: 40px; /* Modified by me to align the list item in the dropdown menu */
text-decoration: none;
display: block;
width: 78%; /* Modified by me to change the width of the list item in the dropdown menu */
}
.dropdown-content a:hover {
background-color: #52C3EC;
}
.dropdown:hover .dropdown-content {
display: block;
}
I'm not changing your page's structure, only the CSS code used in them. I've marked which part of the code that I modified along with the explataion.
You can still see a little bit of space and the end of Contact element. That's because scaling the size in percentage is hard. You can fix that by changing the unit to pixel. I'll leave the decision to you.
Also the result is best viewed in your browser not in JSFiddle due to size constraint.
I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
header {
/*insert something here?*/
}
nav {
background-image: url("header.jpg");
background-position: center;
padding: 1%;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size 17px;
font-family: helvetica;
letter-spacing: 2px;
}
nav li,
nav ul {
list-style: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav .material-icons {
display: none;
font-size: 36px;
color: blue;
}
#media screen and (max-width: 600px) {
nav a:not(:first-child) {
display: none;
}
nav .material-icons {
float: left;
display: block;
}
}
<header>
Knox Enterprises Inc.
<nav>
<i class="material-icons">menu</i>
Home
About
Contact
</nav>
</header>
I would make header display: flex and use justify-content: space-between to separate them - or you can remove that for the text and nav to be side-by-side on the left, or justify-content: center to put them in the center or justify-content: flex-end to put them on the right. Put the text in an h1 or some other element if it's more appropriate, then add position: fixed; width: 100% to keep it pinned to the top of the page.
body {
min-height: 500vh;
background: #eee;
margin: 0;
}
header {
display: flex;
justify-content: center;
position: fixed;
width: 100%;
background: #fff;
align-items: center;
}
nav {
background-image: url("header.jpg");
background-position: center;
padding: 1%;
overflow: hidden;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#media (max-width: 900px) {
nav { position: static; transform: translateY(0); }
header { justify-content: space-between; }
}
nav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size 17px;
font-family: helvetica;
letter-spacing: 2px;
}
nav li, nav ul{
list-style: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav .material-icons {
display: none;
font-size: 36px;
color: blue;
}
#media screen and (max-width: 600px) {
nav a:not(:first-child) {display: none;}
nav .material-icons {
float: left;
display: block;
}
}
htmlcss
<header>
<nav>
<i class="material-icons">menu</i>
Home
About
Contact
</nav>
<h1>Knox Enterprises Inc.</h1>
</header>
You right placed in the header text and navigation, however, in order to easily manipulate the position of the text using css it should be placed inside a div, p or span.
In order for your title stick in scroll to the top of the page there is position: fixed. When using it, don't forget to give the parent of the header (ex. body) position: relative.
body {
position: relative;
padding: 0;
margin: 0;
}
header {
position: fixed;
background-color: #bbc;
display: flex;
width: 100vw;
height: 100px;
line-height: 50px;
box-sizing: border-box;
padding: 0 16px;
flex-direction: column;
}
main {
padding: 16px;
padding-top: 100px;
}
p {
text-indent: 2em;
<header>
<span>Knox Enterprises Inc.</span>
<nav>
<i class="material-icons">menu</i>
Home
About
Contact
</nav>
</header>
<main>
<h1>I'm trying to find out a way</h1>
<p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of
the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
</p>
<p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of
the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
</p>
<p>I'm trying to find out a way to make my nav bar and header title a part of each other. In other words, I'd like the text for my header to be on top of my nav bar or a part of it, as well as both the nav and the header text to be fixed to the top of
the page for scrolling. I've been playing around and have gotten no where. I'm not really sure how to control the css and html for it.
</p>
</main>
header>div {
display:inline;
float:left
/*insert something here?*/
}
nav {
display:inline;
width:auto;
background-image: url("header.jpg");
background-position: center;
padding: 1%;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size 17px;
font-family: helvetica;
letter-spacing: 2px;
}
nav li, nav ul{
list-style: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav .material-icons {
display: none;
font-size: 36px;
color: blue;
}
#media screen and (max-width: 600px) {
nav a:not(:first-child) {display: none;}
nav .material-icons {
float: left;
display: block;
}
}
<header>
<div>Knox Enterprises Inc.</div>
<nav>
<i class="material-icons">menu</i>
Home
About
Contact
</nav>
</header>