Every time I change to mobile view the navigation bar shifts a bit to down right.
I´m relative new to web development and I am really at a loss here I have tried a bunch of things but I end up encountering the similar problem. Here is what I have tried so far.
header nav ul{
list-style: none;
display: inline-block;
padding: 0 22px;
margin: 0;
justify-content: space-between;
text-align: right;
position: relative;
}
.navbar{
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: rgb(192, 192, 192);
color: #fff;
}
nav ul li a{
color: #000000;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
}
Related
So, I'm currently making a website and for this website i'll obviously have a nav bar, I've been trying to fix this issue on mobile where the navbar slides under all of my display and I can't figure out how to fix it.. (Photo below)
Nav Bar Under Displays
But on browser It works perfectly :/ I cant figure it out
I'm trying to get it like this
.nav-links, body {
max-width: -100%;
overflow-x: hidden;
position: sticky;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: rgba(99, 99, 99, 0.404);
font-family: 'poppins', sans-serif;
overflow-x: hidden;
}
.logo{
color: #ffff;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 22px;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 50%;
z-index: 1;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(255, 255, 255);
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 19px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 2px;
background-color: #fff;
margin: 5px;
transition: all 0.3s ease;
}
I want to make a responsive menu navbar and according to some sites, I tried using the checkbox. Unfortunately, I am unable to make it operational due to reasons unbeknown to me (it would be an overestimate to say I'm an amateur at this). When checking/unchecking the button nothing happens. If there is another more effective way of doing this please do share.
I mustn't use anything but HTML and CSS to make it.
Here's the code. (I know I shouldn't post the entirety of it but I'm too inexperienced to know what's of value and what's not - so sorry about that!)
html:
<nav>
<!--logo-->
TBD
<!--meni-->
<ul>
<li>Landing page</li>
<li>about me</li>
<li>gallery</li>
<li>blog</li>
<li>contact</li>
</ul>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
</nav>
css:
nav{
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
background-color: #ffffff;
box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
padding: 0px 5%;
}
nav ul li{
float: right;
display: inline-block;
}
nav ul li a{
margin: 30px;
font-family: calibri;
color: #505050;
font-size: 19px;
font-weight: 700;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
...
#media screen and (max-width: 796px) {
.checkbtn{
display: block;
margin-right: 40px;
color: black;
}
nav ul {
margin: 0px;
padding: 0px;
background-color: #ebeef4;
flex-direction: column;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
display: none;
}
nav ul li {
padding: 10px;
display: block;
}
nav ul li a{
font-family: calibri;
font-size: 1.4em;
text-transform: uppercase;
color: #5c5c5c;
}
nav ul li a:hover{
color: #121212;
}
#check:checked ~ ul{
display: block;
left: 0;
background: rgba(0,0,0,0.8);
}
nav.active ul {
display: flex !important;
}
I'm really trying to comprehend this and once again I am so sorry for the long post. Cheers!
Check boxes are inputs that need to run by form. What you want to happen when it’s checked?
In the nav bar I've created, I've noticed that the a:hover color attribute doesn't stretch to fill the container vertically.
I have tried to increase the vertical padding, which does work, however it doesn't look quite as clean, so I was hoping there was a better way to go about it.
/*Navigation Bar*/
nav {
margin: 0;
padding: 0;
background-color: #383838;
line-height: 45px;
height: 45px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.nav_bar a {
color: white;
text-decoration: none;
vertical-align: middle;
padding: 0px 16px;
}
.nav_bar a.active {
background-color: #33A2FF;
color: white;
}
.nav_bar a:hover:not(.active) {
background-color: #f1f1f1;
color: #000;
}
<nav>
<div class="nav_bar">
Home
Stadium
<i class="fas fa-football-ball"></i>
RSVP
History
</div>
</nav>
Basically, I'm just trying to stretch the color attribute to fit the box vertically.
Remove vertical-align: middle and add display: inline-flex; to the a elements.
/*Navigation Bar*/
nav {
margin: 0;
padding: 0;
background-color: #383838;
line-height: 45px;
height: 45px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.nav_bar a {
color: white;
text-decoration: none;
padding: 0px 16px;
display: inline-flex; /* To align the elements horizontally */
/* vertical-align: middle; To remove the top spacing. */
}
.nav_bar a.active {
background-color: #33A2FF;
color: white;
}
.nav_bar a:hover:not(.active) {
background-color: #f1f1f1;
color: #000;
}
<nav>
<div class="nav_bar">
Home
Stadium
<i class="fas fa-football-ball"></i>
RSVP
History
</div>
</nav>
I am trying to figure out how to align my links to be in the center of the nav bar unlike how they are now up top. I have attached what I have done so far but I am unable to figure out how to align the links to be in the middle. I have attached what I have done below. Any and all help will be greatly appreciated.
I have tried different content and text align as well as position but to no avail. However I am still only learning and may not have tried everything
<body>
<header>
<div class="navbar">
<img src="images/logo.png" alt="logo">
Home
Design
<div class="dropdown">
<button class="dropbtn">Photo
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Portrait
Landscape
Street
Product
</div>
</div>
Contact
About
</div>
</header>
* {
padding: 0;
margin: 0;
}
/* Navbar */
header {
align-content: center;
text-align: center;
}
.navbar {
overflow: hidden;
background-color: black;
font-family: futura-pt, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
font-weight: 600;
color: #939393;
text-align: center;
padding: 35px;
text-decoration: none;
letter-spacing: 4px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
letter-spacing: 4px;
border: none;
outline: none;
color: #939393;
font-weight: 600;
padding: 35px 35px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover , .dropdown:hover .dropbtn {
color: white;
transition: background-color 200ms ease-out;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #3E3E3E;
}
.dropdown:hover .dropdown-content {
display: block;
}
https://jsfiddle.net/andrwrbnsn/ag389x4c/13/
If you use flexbox for the navbar display: flex you can set margin-left: auto and margin-right: auto that will tell the browser to fill the space on the left and fill the space on the right which will center them. Then set the logo to position absolute so that it doesn't make the buttons off center.
.navbar {
display: flex;
justify-content: center;
}
Your navbar can easily centered using flex property on its parent i.e header element. And, you need to set background color of the header instead of navbar. Consider editing as follows:
header {
/* align-content: center; */
/* text-align: center; */
width: 100%;
background-color: black;
display: flex;
justify-content: center;
}
.navbar {
overflow: hidden;
font-family: futura-pt, sans-serif;
}
I have a website with a nav-bar using the following HTML:
.nav-bar {
background-color: white;
display: flex;
align-items: flex-start;
}
.nav-bar a {
cursor: pointer;
display: inline-block;
background-color: white;
color: black;
text-decoration: none;
font-size: 25px;
padding: 16px 40px;
border-radius: 3px;
margin: 0px;
transition: 0.3s;
letter-spacing: 2px;
}
#media only screen and (max-width: 737px) {
.nav-bar {
max-width: 737px;
height: 120px;
}
}
<div class="nav-bar">
HOME
ABOUT
BOOK
CONTACT
</div>
Which is fine until the browser gets to about 740px or less, where the navbar no longer fits on one line. I would like for it to collapse onto two lines but instead it gets a horizontal scroller. I have tried to solve this using the media query:
But this only creates a blank space beneath the nav-bar items without actually collapsing it.
You need the flex-wrap property in your .nav-bar. This will wrap your .nav-bar a elements if they would overflow. Additionally you don't need a elements to display as inline-block.
.nav-bar {
background-color: white;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.nav-bar a {
cursor: pointer;
background-color: white;
color: black;
text-decoration: none;
font-size: 25px;
padding: 16px 40px;
border-radius: 3px;
margin: 0px;
transition: 0.3s;
letter-spacing: 2px;
}
You should remove the "display: flex;".
.nav-bar {
background-color: white;
align-items: flex-start;
}
#media only screen and (max-width: 737px) {
.nav-bar {
max-width: 737px;
height: 120px;
overflow: hidden;
}
}