So while my nav displays perfectly in the mobile and tablet viewports, it's been a struggle with the desktop viewport. I just can't seem to get things to display correctly, I don't know what the problem could be, I've managed to get the logo and links parallel to each other, but every time there's an odd open block below the logo that I can't seem to fill. I've tried playing around with the main element's CSS but the block was still there. I also have a CSS Reset.
Example:
2nd Example:
CSS code:
body, img, div, label, figure, figcaption, fieldset, textarea, input,
select, form, p, main, h1, h2, h3, h4, footer, header, nav, table, th, td, ul, li, a {
margin: 0;
padding: 0;
border: 0;
}
/* Desktop: Navigation Menu */
.mobile-tablet-nav {
display: none;
}
.desktop-nav {
display: block;
}
/*
nav li:hover {
background-color: white;
border: 1px black solid;
color: black;
} */
nav {
background-color: #191779;
width: 80%;
float: right;
}
nav li a {
text-decoration: none;
color: white;
}
header {
background-color: #191779;
float: left;
width: 20%;
}
#logo {
padding: 0.5em;
max-width: 90%;
}
nav ul {
text-align: right;
position: relative;
right: 0;
top: 0;
height: auto;
}
nav li {
padding: 0.3em 0;
list-style-type: none;
display: inline-block;
border: none;
}
#logo {
max-width: 52%;
padding: 0.5em;
}
/* Mobile: Navigation */
.desktop-nav {
display:none;
}
/*
nav li:hover {
background-color: white;
border: 1px black solid;
color: black;
} */
#menu-links {
display: none;
}
nav {
background-color: #191779;
position: sticky;
}
nav li a {
text-decoration: none;
text-align: center;
color: white;
padding: 0.1em;
margin: 0 auto;
left: 0;
}
#hamburger {
color: white;
font-size: 1.8em;
margin: 0 auto;
padding: 0.35em;
}
header {
background-color: #191779;
}
nav li {
border-bottom: 1px white solid;
padding: 0.1em;
list-style-type: none;
}
HTML code:
<header>
<img src="images/logo.JPG" id="logo" alt="logo">
</header>
<nav class="desktop-nav">
<!-- Navigation menu for tablet and desktop viewports-->
<ul>
<li><p>Home</p></li>
<li><p>About Us</p></li>
<li><p>Contact Info</p></li>
<li><p>Services</p></li>
<li><p>Contact Us</p></li>
</ul>
</nav>
<nav class="mobile-tablet-nav">
<!-- Hamburger button for interacting with mobile viewport navigation menu-->
<div id="hamburger">
☰
</div>
<!-- Navigation menu for the mobile viewport-->
<div id="menu-links">
<ul>
<li><p>Home</p></li>
<li><p>About Us</p></li>
<li><p>Contact Info</p></li>
<li><p>Services</p></li>
<li><p>Contact Us</p></li>
</ul>
</div>
</nav>
So I don't know what to do anymore. Thank you in advance for the help!
Kind Regards
PrimeBeat
Move header closing tag to after the nav tags.
Related
I am writing a navigation bar with a dropdown option.
I have 2 problems: I can't get the dropdown to position properly under the menu, + also when I try to move the mouse to click on the elements in the dropdown submenu it closes as soon as I move.
Can anyone suggest a fix?
Thanks
On codepen:
https://codepen.io/-royqooe/pen/GRxaVbm
/* CSS section for home */
.navtop {
position: relative;
background-color: #333333;
height: 50px;
width: 100%;
border: 0;
}
.navtop div {
display: flex;
margin: 0 auto;
height: 100%;
}
.navtop div h1,
.navtop div a {
display: inline-flex;
align-items: center;
}
.navtop div h1 {
flex: 1;
font-size: 24px;
padding: 0;
margin: 0;
margin-left: 2%;
color: #f5f8ff;
font-weight: normal;
}
.navtop div a {
padding: 0 12px;
text-decoration: none;
color: #c1c4c8;
font-weight: bold;
}
.navtop div a i {
padding: 2px 8px 0 0;
}
.navtop div a:hover {
color: #66ccff;
}
/* sequel for home and navbar */
nav.navtop {
font-family: monospace;
}
.navtop>.navbar>ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.navtop li {
display: block;
float: left;
padding: 0.5rem 0;
position: relative;
text-decoration: none;
transition-duration: 0.3s;
}
.navtop ul li ul {
background: red;
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
.navtop ul li:hover>ul,
.navtop ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
.navtop ul li ul li {
clear: both;
width: 100%;
}
#media screen and (max-width: 760px) {
.topbar-text {
display: none;
}
}
<nav class="navlol navtop" role="navigation">
<div class="navbar">
<h1>Websitee Title</h1>
<ul>
<li><i class="fa-solid fa-file"></i><span class="topbar-text">Home</span></li>
<li>Two
<ul class="dropdownnn">
<li>Sub-1</li>
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li class="navelements">Three</li>
<li><i class="fas fa-user-circle"></i><span class="topbar-text">Profile</span></li>
<li><i class="fas fa-sign-out-alt"></i><span class="topbar-text">Logout</span></li>
</ul>
</div>
</nav>
got an easy fix for you:
add this
.navtop li {
min-height:25px;
}
the issue is that that menu li was way shorter than the others to the sides due to the icons, even better maybe is instead adding this instead:
.navtop li {
height:100%
}
both worked for me
In the screenshot, the yellow color is the area that <li> element is covering. You can see there is a gap between <li> element and submenu. When you try to move the mouse to submenu, your cursor goes out of yellow area and the submenu hides.
The solution would be to position the submenu so it starts exactly after yellow area and make sure there is no gap. Apply margin-top of 0.5rem on submenu instead of 1rem.
I am working on a horizontal navigation bar with a dropdown menu. I'm quite new to making codes so this is maybe a stupid question. My navigation is sticking to the left of my website, but I need it to stay in line with the text and I can't get the navigation bar threw my whole webpage how do I fix this?
photo of my website with the 2 problems:
enter image description here
nav {
position: absolute;
}
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
width: 70px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
h1 {
margin-top: 80px;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Two things in your css are giving you trouble.
nav{ position: absolute; } means this div will not fill the width.
horizontal{ margin: 40 auto;} 40 is not valid.
You MUST specify a measurement unit in CSS, so it should be 40px if I'm guessing your intention, but other units are available.
Here is amended css you can try.
nav {
width: 100%;
background-color: #006600;
}
.horizontal {
list-style-type: none;
margin: 40px auto;
width: 640px;
padding: 0;
overflow: hidden;
}
Step 1) Add HTML:
Example
<!-- The navigation menu -->
<div class="navbar">
<a class="active" href="#">Home</a>
Planning
Takken
Kleding
Contact
Inschrijven
</div>
And CSS:
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 15%;; /* Four links of equal widths */
text-align: center;
}
I've asked a question like this before, but I am using differnt code to last time.
I'm trying to create a dropdown menu. Ther are certain elements in that main list that have a dropdown list (News and Team). For some reason, they are moved over to the right. What I would like is for the items in the dropdown to be aligned with its parent.
Any help would be appreciated.
Thanks
http://codepen.io/DocRow10/pen/hjIkq
<body>
<div id="container">
<div id="banner" class="clearfix">
<img id="crest" src="images/cecc-logo.png" />
<h1>Test Website</h1>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>About</li>
<li>News
<ul>
<li>Social Events</li>
</ul>
</li>
<li>Team
<ul>
<li>Players</li>
<li>Fixtures/Results</li>
<li>Statistics</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Menu
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
body {
background-color: rgb(200, 220, 255);
/* #455868 */
}
#container {
height: 1000px;
margin-left: auto;
margin-right: auto;
}
#banner {
width: 100%;
text-align: center;
}
#crest {
height: 150px;
width: 180px;
display: inline-block;
}
#banner h1 {
display: inline-block;
}
/* Bat Colour rgb(38, 124, 196); */
#media only screen and (min-width : 480px) {
#banner h1 {
font-size: 30px;
display: inline-block;
}
}
#media only screen and (min-width : 768px) {
#banner h1 {
font-size: 36px;
display: inline-block;
}
}
#media only screen and (min-width : 980px) {
#banner h1 {
font-size: 47px;
display: inline-block;
}
}
nav {
height: 40px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: rgb(238, 0, 0);
font-size: 13pt;
font-family: neris;
border-bottom: 2px solid #283744;
}
nav > ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav > ul > li {
display: inline;
float: left;
}
nav ul a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul ul li {
display: block;
}
main {
width: 90%;
height: 200px;
margin-right: auto;
margin-left: auto;
background-color: rgb(38, 124, 196);
}
footer {
width: 90%;
height: 50px;
margin-right: auto;
margin-left: auto;
background-color: rgb(0, 0, 0);
}
Some element on the web page have standard padding values.
For example all lists have padding-left. If you want to change this try this:
Add this in your CSS code:
ul {
padding: 0;
}
Or you can add come specific id or class for this menu, and change padding for them.
You just need to add padding: 0 to your nav ul ul rule so it appears like so:
nav ul ul {
display: none;
position: absolute;
padding: 0;
}
By default, ul elements have a left padding of 40px, you need to remove that padding to make the second level ul align with the first.
I just want to say a big thank you for all your answers. I don't know why it's taken so long, but I've finally figured it out.
In the codepen I displayed, there was one important thing I was leaving off: The CSS file for the Mobile-Responsive framework known as Foundation. That CSS File had all ul tags have a margin-left of 1.25em. That is why the ul tag was moved over to the right.
To fix this problem, I changed the following:
nav ul ul {
display: none;
position: absolute;
padding: 0;
margin: 0;
}
I added a margin property and now it is all fine.
Again, thank you to everyone who helped me with this answer and sorry for wasting your time.
I wish you all well.
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>
i'm trying to center my nav in a responsive design. When the viewport is stretched to about 900px, the 3 nav titles look off center to the rest of the content on the page. Does anyone of a way to fix this?
HTML:
<header>
<div id="logo">
<a href="#">
<img src="images/logo_55x73.png" alt="StudioMed" />
</a>
</div>
<nav>
<ul>
<li>Work</li>
<li>Profile</li>
<li>Journal</li>
</ul>
</nav>
</header>
CSS:
header {
background-color: #fff;
border-bottom: solid 1px #e4e4e4;
}
#logo {
padding: 2.3em 1.1em 1.7em 1.1em;
text-align: center;
}
nav {
display: block;
}
nav ul {
text-align: center;
}
nav li {
font-size: 0.95em;
display: inline;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0 1%;
}
nav a {
text-decoration: none;
display: inline-block;
width: 122px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#media only screen and (min-width:767px) {
header {
float: left;
overflow: auto;
width: 100%;
}
#logo {
float: left;
width: 10%;
}
nav ul li {
float: left;
width: 22.1354166666667%;
margin-top: 50px;
font-size: 1em;
}
}
Thanks in advance
Your UL may have some default padding on its left.
Try adding this to your CSS:
nav ul {
...
padding: 0px;
}
http://jsfiddle.net/cxNZZ/
EDIT:
The padding issue above did not seem to solve your issue.Here is a different theory:
Each LI is the same width, but the text inside each LI may not be. That could cause the menu to appear to be off center, even though the LIs are centered.
http://jsfiddle.net/d6hRg/1/
http://jsfiddle.net/d6hRg/2/
See what I mean?