I am trying to create a navbar in my site, but every time I try to align the logo to the left the page selection is put higher, anyone have a solution?
Screenshot:
This is the html code:
<div class="NavBar">
<ul class="Items">
<li class="Logo">
<img src="images/logo1.png" alt="IM2B - Play your brand">
</li>
<li class="Links">
<a class="active" href="#home">Home</a>
News
Contact
About
</li>
</ul>
</div>
This is the css code:
.NavBar {
list-style-type: none;
overflow: hidden;
background-color: #333;
padding: 20px;
}
.NavBar .Items {
margin: auto;
width: 60%;
text-align: center;
list-style: none;
}
.NavBar .Logo {
float: left;
}
.NavBar .Links {
display: inline-block;
padding: 0px 16px;
}
.NavBar .Links a {
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.NavBar .Links a:hover {
background-color: #ddd;
color: black;
}
.NavBar .Links a.active {
background-color: #04AA6D;
color: white;
}
Add flex property to your outside navitems' containers:
.NavBar .Items {
margin: auto;
display: flex;
justify-content: space-around;
align-items: center;
/* width: 60%; */
text-align: center;
list-style: none;
}
.NavBar .Links {
border: 2px solid white;
display: flex;
justify-content: space-around;
align-items: center;
}
Is this you were looking for? Look, there are 2-levels of display:flex for alignments.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.NavBar {
list-style-type: none;
background-color: #333;
padding: 10px;
}
ul li {
list-style-type: none;
}
.NavBar .Items {
display: flex;
justify-content: space-around;
}
.NavBar .Links {
display: flex;
}
.NavBar .Links a {
color: #f2f2f2;
text-decoration: none;
font-size: 17px;
padding: 10px 20px;
display: inline-block;
height: 40px;
align-self: center;
}
.NavBar .Links a:hover {
background-color: #ddd;
color: black;
}
.NavBar .Links a.active {
background-color: #04AA6D;
color: white;
}
img {
height: 60px;
width: 100px;
}
<div class="NavBar">
<ul class="Items">
<li class="Logo">
<img src="https://picsum.photos/200/300" alt="IM2B - Play your brand">
</li>
<li class="Links">
<a class="active" href="#home">Home</a>
News
Contact
About
</li>
</ul>
</div>
Related
I am trying to create a simple web page and I want the links' background covers the whole space in navbar but it covers only the text around it.
My code is here:
.navbar {
width: 105%;
height: 5vw;
display: flex;
flex-direction: row;
background-color: #008083;
z-index: 10;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0px;
overflow: hidden;
}
.navbar li {
float: left;
}
.navbar li a {
text-decoration: none;
color: black;
padding: 1px;
text-align: center;
}
.tab {
width: 100%;
display: flex;
background-color: grey;
justify-content: center;
align-items: center;
margin: 1px;
}
<nav class="navbar">
<ul>
<li>Biography</li>
<li> Novels </li>
<li> Films </li>
</ul>
</nav>
Any suggestions?
You can remove the height from the navbar class so, it'll take the available height. Also, you can add height to .navbar li (Optional, if you want to use some custom height).
.navbar {
width: 105%;
/*height: 5vw;*/
display: flex;
flex-direction: row;
background-color: #008083;
z-index: 10;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0px;
overflow: hidden;
}
.navbar li {
float: left;
/*height: 100%;(Optional)*/
}
.navbar li a {
text-decoration: none;
color: black;
padding: 1px;
text-align: center;
}
.tab {
width: 100%;
display: flex;
background-color: grey;
justify-content: center;
align-items: center;
margin: 1px;
}
<nav class="navbar">
<ul>
<li>Biography</li>
<li> Novels </li>
<li> Films </li>
</ul>
</nav>
i don't understand exact your problem but if your problem with the default margin and padding its a solution
* {
padding: 0;
margin: 0;
}
.navbar {
width: 105%;
height: 5vw;
display: flex;
flex-direction: row;
background-color: #008083;
z-index: 10;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0px;
overflow: hidden;
}
.navbar li {
float: left;
/*height: 100%;(Optional)*/
}
.navbar li a {
text-decoration: none;
color: black;
padding: 1px;
text-align: center;
}
.tab {
width: 100%;
display: flex;
background-color: grey;
justify-content: center;
align-items: center;
margin: 1px;
}
<nav class="navbar">
<ul>
<li>Biography</li>
<li> Novels </li>
<li> Films </li>
</ul>
</nav>
I have removed some unnecessary style from your code & build this using CSS display: flex; instead of float. Now .tab is covering full height with background.
Here is the working example:
.navbar {
background-color: #008083;
z-index: 10;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
align-items: center;
}
.navbar li {
margin: 0;
padding: 0;
}
.navbar li a {
text-decoration: none;
color: black;
text-align: center;
padding: 10px;
display: block;
}
.tab {
background-color: grey;
}
<nav class="navbar">
<ul>
<li>Biography</li>
<li> Novels </li>
<li> Films </li>
</ul>
</nav>
right now the purple just covers the text but it should be a nice block of colour like the dropdown is. Also, I have a bar under my nav img that should not be there when I hover. I know it is a width/height thing, but no matter where I put the code it does not work.
https://codepen.io/Smoki248/pen/NWxrOWK
li {
list-style: none;
}
a {
color: #f2f2f2;
text-decoration: none;
}
a:hover {
background-color: #8781bd;
}
.container {
max-width: 100%;
width: 100%;
margin: 0 auto;
text-align: center;
}
.btn {
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 400;
font-family: "Amatic SC", Roboto, sans-serif;
border: 1px #8781bd solid;
border-radius: 2px;
background: #8781bd;
color: #f2f2f2;
cursor: pointer;
}
.grid {
display: flex;
}
header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 0px;
display: flex;
align-items: center;
background-color: #2f2f2f;
}
#media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
.logo {
width: 60vw;
}
#media (max-width:650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.logo > img {
width: 100%;
height: 100%;
max-width: 100px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
}
#media (max-width: 650px) {
.logo > img {
margin: 0 auto;
}
}
nav {
font-weight: 400;
}
#media (max-width: 650px) {
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
}
}
h1 {
font-family: "Amatic SC", Raleway, Roboto, sans-serif;
font-size: 35pt;
width: 100%;
text-align: center;
}
h2 {
font-family: "Amatic SC", Raleway, Roboto, sans-serif;
font-size: 24pt;
width: 100%;
text-align: center;
}
nav li {
padding-bottom: 30px 0px;
}
nav > ul {
width: 30vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
#media (max-width: 650px) {
nav > ul {
flex-direction: column;
}
}
.dropdown > li{
float: right;
overflow: hidden;
}
.dropdown > li a {
font-size: 16px;
border: none;
outline: none;
color: #f4f4f4;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
nav > li a:hover, .dropdown:hover a {
background-color: #8781bd;
color:#f4f4f4;
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
color: #f4f4f4;
z-index: 1;
margin-top: 20px;
min-width: 100px;
}
.dropdown-content li a {
float: none;
color: #f4f4f4;
padding: 10px 14px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li a:hover {
background-color: #625aa9;
color: #f4f4f4;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header id="page-wrapper">
<header id="header">
<div class="logo">
<nav>
<a href="http://www.wrecklessdevelopment.com"><img id="header-img"
src="images/wreckless-development-logo.gif" alt="Wreckless Development Logo"/></a>
</nav>
</div>
<h1>Wreckless Development</h1>
<nav id="navbar">
<ul>
<li>About</li>
<li>Services</li>
<div class="dropdown">
<li><i class="fa fa-caret-down"></i> Portfolio<li>
<div class="dropdown-content">
<ul>
<li>Photography</li>
<li>Composite</li>
<li>Logos</li>
<li>Branding</li>
<li>Advertising</li>
</ul>
</div>
</div>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</header>
</header>
The problem is tag a's default display is inline, so if you want to adjust height of a tag, you have to change it's default display to display: inline-block like this, and then you may be able to do whatever you want with that a tag, you can refer my code below for more details:
#header a {
display: inline-block; // change display style
height: 75px;
line-height: 75px; // center the text
padding-left: 12px;
padding-right: 12px;
}
.dropdown > li > a {
padding: 0 16px; // no need to padding top and bottom because we already had line-height and height
}
.dropdown-content{
margin-top: 75px; // push the .dropdown-content further to fit new css
}
#header .dropdown-content li a{
display: block; // set an <a> tag to full with of the dropdown
height: auto;
line-height: 16px; // center the text with current font-size
}
you can take a look in my codepen.io for more details here. Hope it will help
I have a navigation bar which is OK, but just underneath that there is a 1px line that I cannot get rid of, it should be flush with the address underneath. This is the code that I have can anyone suggest anything?
There is also some of the html which was so hard formatting on here anyhow they want me to add more text. So it is the address underneath the naviation
address.space {
width: 100%;
background: #FF9900;
font-family: 'Monserrat', sans-serif;
text-align: center;
display: inline-block;
font-size: 1em;
margin-bottom: 20px;
}
/*menu*/
.nav {
background-color: #3333FF;
width: 100%;
height: 40px;
line-height: 40px;
}
.menu {
font-family: Monserrat, sans-serif;
font-size: 20px;
color: white;
list-style-type: none;
padding: 0;
position: relative;
z-index: 1;
}
.menu a {
text-decoration: none;
color: #fff;
line-height: 40px;
height: 40px;
display: block;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 0 20px 0 20px;
width: 13.5%;
height: 40px;
}
.menu li:visited,
.menu li:active,
.active,
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 14px 0 0;
font-size: 20px;
display: none;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
html,
body,
#main,
#firstside,
.firstsidewider,
#second,
.wide {
width: 100%;
font-size: 1em;
}
h1 span {
display: none;
}
label {
cursor: pointer;
display: block;
color: #fff;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu li a {
border-bottom: 1px solid #F4F4F4;
display: block;
background: #3333FF;
margin: -20px;
padding: 0;
}
.active,
.menu li:hover {
color: #fff;
background: 0;
}
#toggle:checked+.menu {
display: block;
}
<header id="banner">
<div class="nav">
<label for="toggle">☰</label><input id="toggle" type="checkbox">
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts
</li>
<li>Members
</li>
<li>Policies
</li>
<li>Links</li>
<li class="active">
Volunteer/li>
</ul>
</div>
</div>
<address class="space">
Meeting Address: YMCA -The Lecture Room 29 Rush Green
Road
4.00pm - 6.00pm</address>
<section id="leftheader">
<h1>Hubb <span>support group</span></h1>
I tried to play all around the codes, but I didn't find a solution. Can anyone help me to center all content inside the border box?. I tried to search everywhere and I can't find the solution. Advance Thanks.
https://i.stack.imgur.com/f17JF.png
.menubar {
width: 50vw;
height: 5rem;
background-color: #283747;
margin: auto;
border-bottom-left-radius: 10rem;
border-bottom-right-radius: 10rem;
position: relative;
}
.mainMenu {
list-style-type: none;
text-align: center;
position: relative;
}
li.navbar {
list-style-type: none;
display: inline-block;
padding: .8rem 6rem 1rem 3rem;
text-transform: uppercase;
background: #fff;
width: 1.5rem;
height: 1.5rem;
border-radius: 1rem;
}
li.navbar a {
color: #000;
text-decoration: none;
}
<div class="menubar">
<nav>
<ul class="mainMenu">
<li class="navbar">Hub</li>
<li class="navbar">Blog</li>
<li class="navbar">News</li>
</ul>
</nav>
</div>
If you want to center the nav inside the .menubar container, give it these styles: display: flex; justify-content: center; align-items: center;. Then remove the default browser left padding on .mainMenu by giving it padding: 0.
.menubar {
width: 50vw;
height: 5rem;
background-color: #283747;
margin: auto;
border-bottom-left-radius: 10rem;
border-bottom-right-radius: 10rem;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mainMenu {
list-style-type: none;
text-align: center;
position: relative;
padding: 0;
}
li.navbar {
list-style-type: none;
display: inline-block;
text-transform: uppercase;
background: #fff;
border-radius: 1rem;
}
li.navbar a {
color: #000;
text-decoration: none;
display: inline-block;
padding: 1rem 3rem 1rem 3rem;
}
<div class="menubar">
<nav>
<ul class="mainMenu">
<li class="navbar">Hub</li>
<li class="navbar">Blog</li>
<li class="navbar">News</li>
</ul>
</nav>
</div>
Do You want this?
.menubar {
height: auto;
background-color: #283747;
margin: auto;
position: relative;
}
.mainMenu {
list-style-type: none;
text-align: center;
position: relative;
vertical-align: middle;
}
li {
list-style-type: none;
display: inline-block;
padding: 1rem 4rem 1rem 3rem;
background: #fff;
width: 1.5rem;
height: 1.5rem;
border-radius: 1rem;
margin: 30px auto;
}
li.navbar a {
color: #000;
text-decoration: none;
text-transform: uppercase;
}
<div class="menubar">
<nav>
<ul class="mainMenu">
<li class="navbar">Hub</li>
<li class="navbar">Blog</li>
<li class="navbar">News</li>
</ul>
</nav>
</div>
jsfiddle
I can not seem to get my header to have the titles centered in the middle of the header box. How it looks now, it has the news, contacts, and about links high up in the box and not centered.
HTML:
<ul>
<li style="float:left"><a class="active" <a onclick="window.open(this.href, this.target);return false;" href="http://link/" target="link"> <img src="Logo.png" alt="Logo" style="width:125px;height:75px;"></a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: red;
}
.active {
background-color: black;
}
Try this on the <li>:
.li {
position: relative;
top: 50%;
transform: translateY(-50%);
}
how this works
EDIT: Cleaned up some unbalanced HTML issues and cleaned up the css:
ul {
list-style-type: none;
margin: 0;
padding: 50px; /* adjust as necessary */
overflow: hidden;
background-color: black;
}
li {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
<ul>
<li>
<a class="active" onclick="window.open(this.href, this.target);return false;" href="http://link/" target="link"> <img src="Logo.png" alt="Logo" style="width:125px;height:75px;"></a>
</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
here's a more modern approach:
https://jsfiddle.net/qq0t46pt/2/
flexbox is also well supported now, and easier to implement.
HTML
<ul>
<li style="float:left"><a class="active"> <a onclick="window.open(this.href, this.target);return false;" href="http://link/" target="link"> <img src="Logo.png" alt="Logo" style="width:125px;height:75px;"></a></a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
height: 370px;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: red;
}
.active {
background-color: black;
}