I tried placing two nav bars under each other but I am facing difficulty in aligning the second nav bar in respect to the first one. I didn't quite understand why the second nav bar does'nt float right.
Below are my html and css codes.
.header_nav1 {
display: block;
float: right;
color: #000;
font-family: verdana;
text-transform: uppercase;
max-width: 1024px;
}
.header_nav1 ul li {
padding-top: 10px;
padding-right: 10px;
list-style-type: none;
display: inline;
}
.header_nav2 {
display: block;
padding: 50px;
}
.header_nav2 ul li {
display: inline;
list-style-type: none;
float: right;
padding-right: 15px;
max-width: 1024px;
}
<header class="header_navigation">
<div class="container">
<nav class="header_nav1">
<ul>
<li>Contact</li>
<li>Search</li>
</ul>
</nav>
<nav class="header_nav2">
<ul>
<li>INVESTORS</li>
<li>CAREER</li>
<li>OUR PORTFOLIO</li>
<li>RETAIL SOLUTIONS</li>
</ul>
</nav>
</div>
</header>
Thank you.
I found out that it is caused by the container class.
You can either remove the container or change float: right to display: inline-block
Don't use float:right instead use display:inline
why inline? inline - basically it starts with new line and occupy the whole parent size
I also combine both header_nav1 and header_nav2 on 1 CSS since both of it has the same layout
Here, check the snippet codes below and try seeing it also in full page. Hope it helps.
.header_nav1, .header_nav2 {
display: inline;
color: #000;
font-family: verdana;
text-transform: uppercase;
max-width:1024px;
}
.header_nav1 ul li{
padding-top: 10px;
padding-right:10px;
list-style-type: none;
display: inline;
}
.header_nav2 ul li{
display: inline;
list-style-type: none;
padding-right:15px;
max-width:1024px;
}
<header class="header_navigation">
<div class="container">
<nav class="header_nav1">
<ul>
<li>Contact</li>
<li>Search</li>
</ul>
</nav>
<nav class="header_nav2">
<ul>
<li>INVESTORS</li>
<li>CAREER</li>
<li>OUR PORTFOLIO</li>
<li>RETAIL SOLUTIONS</li>
</ul>
</nav>
</div>
</header>
Related
I'm new to coding and trying to figure out why my nav li's will not display horizontally? I've tried a few things which I've noted in the code below.
The catch here is, I must use floats instead of flexbox.
header nav>* {
float: left;
width: 7%;
margin: 0 5%;
padding-bottom: 30px;
list-style: none;
text-decoration: none;
}
header nav ul li {
width: 100px;
float: right;
display: block;
text-decoration: none;
/*margin-left: 2px;
display: inline; not working*/
}
<header>
<nav>
Courses
<form action="">
<input type="text" placeholder="Search">
</form>
<img class="icon" src="#">
<h2>Tech Academy</h2>
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</nav>
</header>
I have tried changing the specificity to a class or id and that hasn't fixed anything. I should also note that 'text-decoration' is not working for the li but is working for the a 'courses'? * border: box-sizing is also at the top of the css sheet.
This is what it looks like on the browser
I am very new to coding and this one has had me stumped for hours. T
First of all, spacings between attributes in html files have no effect at all on the browser display, and same for spacing in css files.
The second thing, I'm not sure why you don't want to use flex (it's handy here - you set the display of the parent attribute (ul) to display: flex; flex-direction: row; and it will do the trick).
But if you don't want to use it, there are 2 other tricks:
#1
ul {
display: contents; /* this will make the parent act like it doesn't exist - and then do whatever you want with the children*/
}
li {
display: inline-block;
}
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
#2 grid
ul {
display: grid;
grid-template-columns: max-content max-content max-content; /*instaed of max-content, you can assign the width you want for each li*/
}
li {
margin : 5px;
list-style: none;
}
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
You can use flexbox to arrange them either column or row. Declaring display: flex; should apply what you're trying to do. See the snippet below:
header nav>* {
float: left;
width: 7%;
margin: 0 5%;
padding-bottom: 30px;
list-style: none;
text-decoration: none;
}
header nav ul li {
width: 100px;
float: right;
display: block;
text-decoration: none;
/*margin-left: 2px;
display: inline; not working*/
}
#SideBar{
display: flex;
gap: 5px;
}
<header>
<nav>
Courses
<form action="">
<input type="text" placeholder="Search">
</form>
<img class="icon" src="#">
<h2>Tech Academy</h2>
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</nav>
</header>
More on flexbox here.
Use this on css.....
#SideBar{
display: flex;
}
header nav>* {
float: left;
/*width: 7%;*/
margin: 0 5%;
padding-bottom: 30px;
list-style: none;
text-decoration: none;
}
header nav ul li{
width: 100px;
float: right;
/*display: block;*/
text-decoration: none;
margin-left: 2px;
display: inline;
}
<header>
<nav>
<h2>Tech Academy</h2>
<ul id="SideBar">
<li>Donate</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</nav>
</header>
The problem
is you have used width: 7%; to header nav>*
Weird one
its weird that you have used display: block; along with display: inline;
Solution
I have commented the The problem and Weird one,run the snippet it should work
I got 2 lists with different class but they dont work independent, both lists are unordered, class "menu" list is : list-style-type: none; which is fine as it is my nav bar, but my second list which is "habilidades" doesnt show the little dots to the left, the only one that changed is the font family on my "Habilidades" class but I cant make the dots to appear
PS: Im starting to learn
.menu {
display: flex;
list-style-type: none;
justify-content: space-around;
width: 50%;
text-align: center;
align-items: center;
margin-left: auto;
height: 20%;
margin-top: 20px;
}
.menu li a {
color: black;
text-decoration: none;
font-size: 20px;
}
.habilidades li {
font-family: cursive;
list-style-type: disc;
}
<nav>
<ul class="menu">
<li>Home</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
<section>
<ul class="habilidades">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
I’m trying to figure out how to reposition the entire <ul> element to the center of the screen, yet every time I try a new method the drop-down items get jumbled up by either shifting slightly to the right or they lay on top of one another.
Can someone lend a hand, let me know what I’m doing wrong and give me some tips to make it a bit easier?
Here’s what I’m working with.
html,
body {
margin: 0px;
padding: 0px;
}
.menu ul {
/*This is blank because nothing I tried works*/
}
ul {
list-style: none;
font-family: cursive;
margin: 0;
padding: 0;
}
ul li {
float: left;
display: block;
height: 50px;
width: 200px;
background-color: lightgray;
}
ul li a {
display: block;
color: black;
text-decoration: none;
line-height: 50px;
text-align: center;
}
ul li a:hover {
background-color: lightblue;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Test</title>
</head>
<body>
<div class="menu">
<ul>
<li>About
<ul>
<li>About</li>
<li>About</li>
<li>About</li>
<li>About</li>
</ul>
</li>
<li>About
<ul>
<li>About</li>
<li>About</li>
<li>About</li>
</ul>
</li>
<li>About
<ul>
<li>About</li>
<li>About</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</body>
</html>
ul {
display: flex;
justify-content: center;
}
Add this code to your UL tag, it should center the whole thing
I'm having trouble vertically aligning the links and the logo inside the list any idea what i can to fix it?
Here is the code in codepen.
http://codepen.io/tacoxlegendary/pen/VjXqkA?editors=1100
<body>
<nav>
<div class="wrapper ">
<ul class="cf">
<li id="logo">LOGO</li>
<li>SIGN IN</li>
<li>LOCTION</li>
<li>TEAM</li>
<li>ABOUT</li>
</ul>
</div> <!-- wrapper end -->
</nav>
.wrapper {
max-width: 1120px;
margin: 0 auto;
}
nav {
background-color: #F7FDFE;
}
nav ul li {
display: inline-block;
color: #45494D;
float: right;
padding: 10px;
font-size: 14px;
}
nav ul #logo {
float: left;
font-size: 30px;
}
Add padding:0 to nav ul #logo
.wrapper {
max-width: 1120px;
margin: 0 auto;
}
nav {
background-color: #F7FDFE;
}
nav ul li {
display: inline-block;
color: #45494D;
float: right;
padding: 10px;
font-size: 14px;
}
nav ul #logo {
float: left;
font-size: 30px;
padding:0;
}
<nav>
<div class="wrapper ">
<ul class="cf">
<li id="logo">LOGO</li>
<li>SIGN IN</li>
<li>LOCTION</li>
<li>TEAM</li>
<li>ABOUT</li>
</ul>
</div> <!-- wrapper end -->
</nav>
a simple way to center the navbar and logo in the center of navbar is to set a height to navbar and give the same value as line-height to li
like
nav {
height: 70px;
}
ul.cf {
line-height: 70px;
}
How do I get all my menu items (apart from home) to sit on the right hand side without their order being reversed (i.e keep Features as the first item).
Please see my code below:
* { box-sizing: border-box; }
body { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color:#828282; }
.header {padding: 10px;}
.header ul {list-style: none;}
.header ul li {display: inline}
<div class="header">
<ul>
<li>Home
<li>Features
<li>Pricing
<li>Sign up
<li>Login
</ul>
</div>
<div class="shout">
Start
</div>
If you want to move entire menu on right side, you can use float: right for your ul element. In your case it would be:
.header ul {float: right;}
Working fiddle example: https://jsfiddle.net/vpygzyyx/1/
EDIT: Here is an update with HOME on left side and rest of the menu on right side of header:
.header ul {list-style: none; text-align:right;}
.header ul li {display: inline}
.header ul li:first-child{float:left}
Fiddle demo link: https://jsfiddle.net/vpygzyyx/2/
Use direction: rtl; and float: left; on li:first-child. See the snippet
* {
box-sizing: border-box;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
color: #828282;
}
.header {
padding: 10px;
}
.header ul {
list-style: none;
}
.header ul li {
display: inline
}
ul {
direction: rtl;
}
li:first-child {
float: left
}
<div class="header">
<ul>
<li>Home
</li>
<li>Features
</li>
<li>Pricing
</li>
<li>Sign up
</li>
<li>Login
</li>
</ul>
</div>
<div class="shout">
Start
</div>
You have to make two menu for that, and you can achieve your output, try following code :-
<div class="header">
<ul>
<li>Home</li>
</ul>
<ul class="right-menu">
<li>Features</li>
<li>Pricing</li>
<li>Sign up</li>
<li>Login</li>
</ul>
</div>
Css will be :-
.header .right-menu{
float: right;
}
It may help you.
Split your ul into a .left-menu for Home and a .right-menu for the other items then add float:left to the left-menu and float:right to right-menu, finally add the clearfix to the header to force your other elements down below the menu:
* { box-sizing: border-box; }
body { font-family:Verdana, Geneva, sans-serif; ; color:#828282; }
.header {padding: 10px;}
.: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.header ul {list-style: none;}
.header ul.left-menu {float: left;}
.header ul.right-menu {float: right;}
.header ul li {display: inline}
<div class="header">
<ul class="left-menu">
<li>Home</li>
</ul>
<ul class="right-menu">
<li>Features</li>
<li>Pricing</li>
<li>Sign up</li>
<li>Login</li>
</ul>
</div>
<div class="shout">
Start
</div>
As in this JS Fiddle, give the .header right text-align and then float:left the first child of the list - you forgot to close the li tags
* {
box-sizing: border-box;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
color: #828282;
}
.header {
padding: 10px;
text-align: right;
}
.header ul {
list-style: none;
}
.header ul li {
display: inline
}
.header ul li:first-child {
float: left
}
<div class="header">
<ul>
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>Sign up</li>
<li>Login</li>
</ul>
</div>
<div class="shout">
Start
</div>