This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Closed 5 years ago.
I'm trying to make a nav bar with an image and I'm having trouble with the image affecting the alignment of the other elements in the nav bar. I can't get the links to be flush with the very top of the page. If I remove the image there is no issue.
.logo {
max-height: 80px;
border-radius: 80px;
}
.link-group-wrapper {
display: inline;
margin: 0;
padding: 0;
}
.link-wrapper {
list-style: none;
text-align: center;
font-size: 1.2em;
background-color: #0b215c;
width: 120px;
display: inline-block;
height: 90px;
line-height: 90px;
}
.link {
color: white;
display: block;
text-decoration: none;
}
<div class="navbar-wrapper">
<img class="logo" src="https://image.ibb.co/cVNZww/logo.jpg">
<ul class="link-group-wrapper">
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
</ul>
</div>
Easy fix ! Just put the image html element after your nav bar and add a float style to it (float: left;) with CSS
.logo {
max-height: 80px;
border-radius: 80px;
}
.link-group-wrapper {
display: inline;
margin: 0;
padding: 0;
}
.link-wrapper {
list-style: none;
text-align: center;
font-size: 1.2em;
background-color: #0b215c;
width: 120px;
display: inline-block;
height: 90px;
line-height: 90px;
}
.link {
color: white;
display: block;
text-decoration: none;
}
<div class="navbar-wrapper">
<ul class="link-group-wrapper">
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
<li class="link-wrapper">
<a class="link" href="">Roster</a>
</li>
</ul>
<img class="logo" style="float: left; "src="https://image.ibb.co/cVNZww/logo.jpg">
</div>
Related
I am creating a navbar with a logo on the left side on the navbar and the links on the right side of the navbar. Although I have been successful, there are some unwanted line breaks in the text on the right side of the navbar. How do I get rid of the line breaks in the texts "How it works" and "Available Products"? I am not using Bootstrap and I do not want to use it.
* {
padding: 0;
margin: 0;
font-family: "Roboto", sans-serif;
}
ul {
list-style-type: none;
overflow: hidden;
}
li {
float: left;
}
.container {
align-items: center;
justify-content: center;
display: flex;
}
img {
max-width: 100%;
width: 72.5%;
height: auto;
}
.logo {
flex-basis: 75%;
margin-top: 10px;
margin-left: 10px;
}
.nav-link {
display: block;
text-align: center;
text-decoration: none;
font-size: 20px;
padding-right: 20px;
}
<header id="header">
<nav id="nav-bar">
<div>
<ul>
<div class="container">
<div class="logo">
<li>
<img
id="header-img"
src="https://i.ibb.co/5Mcnrcm/N-logo.png"
style="vertical-align: middle"
/>
</li>
</div>
<li><a class="nav-link" href="#f">Features</a></li>
<li><a class="nav-link" href="#h">How It Works</a></li>
<li><a class="nav-link" href="#a">Available Products</a></li>
</div>
</ul>
</div>
</nav>
</header>
It can be done by applying CSS white-space: nowrap; to e.g. .nav-link as shown below:
* {
padding: 0;
margin: 0;
font-family: "Roboto", sans-serif;
}
ul {
list-style-type: none;
overflow: hidden;
}
li {
float: left;
}
.container {
align-items: center;
justify-content: center;
display: flex;
}
img {
max-width: 100%;
width: 72.5%;
height: auto;
}
.logo {
flex-basis: 75%;
margin-top: 10px;
margin-left: 10px;
}
.nav-link {
display: block;
text-align: center;
text-decoration: none;
font-size: 20px;
padding-right: 20px;
white-space: nowrap;
}
<header id="header">
<nav id="nav-bar">
<div>
<ul>
<div class="container">
<div class="logo">
<li>
<img
id="header-img"
src="https://i.ibb.co/5Mcnrcm/N-logo.png"
style="vertical-align: middle"
/>
</li>
</div>
<li><a class="nav-link" href="#f">Features</a></li>
<li><a class="nav-link" href="#h">How It Works</a></li>
<li><a class="nav-link" href="#a">Available Products</a></li>
</div>
</ul>
</div>
</nav>
</header>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 10 months ago.
As you can see the menu points are not centered vertically like the social media points, could someone please tell me how to do that, it's the first page I am working on. I would also like to scale down the space between the social media links, would be very grateful if someone could help me!
.menu-link {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 22px;
color: #262a2b;
text-decoration: none;
height: 45px;
}
#social-media {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
.menu-link:hover {
color: #0088a9;
}
.active-menu-links {
color: white;
}
#normal-header {
position: fixed;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: auto;
font-size: 19px;
min-height: 100px;
}
#header-img {
height: 110px;
padding-top: 20%;
padding-bottom: 20%;
margin-left: 20%;
}
#nav-bar {}
#nav-bar ul {
list-style: none;
display: flex;
flex-flow: row;
}
#nav-bar li {
padding: 10px;
margin: 12px;
}
#nav-bar ul,
a {
text-decoration: none;
}
<nav id="nav-bar">
<ul>
<li class="nav-link" id="menu-item"> Home </li>
<li class="nav-link" id="menu-item"> About </li>
<li class="nav-link" id="menu-item"> Roadmap </li>
<li class="nav-link" id="menu-item"> Ecosystem </li>
<li class="nav-link" id="menu-item"> Team
<li>
<li>
<a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Instagram"></a>
</li>
<li>
<a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Twitter"></a>
</li>
<li>
<a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Discord"></a>
</li>
-->
</ul>
</nav>
I hope someone can help me. Thanks in advance!
So, I can't identify your problem because the snippet not working well as missing of files
But you can try to add align-items: center; to the #nav-bar ul selector
Or you can add display: flex align-items: center; to the #nav-bar li
You have several options:
Set line-height property of li or li a to the overall height
Set vertical-align: middle; (this doesn't always work for me)
Use paddings and margins (not recommended)
Set display: flex; and align-items: center to your li tag, but it can potentially break your layout
Since you made a snippet I tried and yes, you need line-height.✌️
To explain: If you use line-height with the same height as it's element. The two will match and make a easy menu button. Some side padding and/or margin, and you are done.
.menu-link {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 22px;
color: #262a2b;
text-decoration: none;
height: 45px;
line-height: 45px;
}
#social-media {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
.menu-link:hover {
color: #0088a9;
}
.active-menu-links {
color: white;
}
#normal-header {
position: fixed;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: auto;
font-size: 19px;
min-height: 100px;
}
#header-img {
height: 110px;
padding-top: 20%;
padding-bottom: 20%;
margin-left: 20%;
}
#nav-bar {}
#nav-bar ul {
list-style: none;
display: flex;
flex-flow: row;
}
#nav-bar li {
padding: 10px;
margin: 12px;
}
#nav-bar ul,
a {
text-decoration: none;
}
<nav id="nav-bar">
<ul>
<li class="nav-link" id="menu-item"> Home </li>
<li class="nav-link" id="menu-item"> About </li>
<li class="nav-link" id="menu-item"> Roadmap </li>
<li class="nav-link" id="menu-item"> Ecosystem </li>
<li class="nav-link" id="menu-item"> Team
<li>
<li>
<a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Instagram"></a>
</li>
<li>
<a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Twitter"></a>
</li>
<li>
<a class="nav-link" href="xxx"><img id="social-media" src="xxx" alt="Discord"></a>
</li>
-->
</ul>
</nav>
so I've tried a few different things out. But ultimately no success. I'm trying to change the colour of the "Home" link to stay a different colour than the rest when we are specifically on the homepage. So for example, say I'm on the homepage, I specifically want that colour to be orange for the home link, and then when I click on About link, about link changes to orange and the home goes to default white
Html:
<!--Header-->
<header class="header-main">
<!--Navigation menu-->
<nav class="navigation">
<!--Bakingwithwill Logo-->
<img class="logo" src="imgs/bww.png" alt="Bakingwithwill" />
<!--Navigation links-->
<div class="nav-links">
<!--Unordered list of navigation items-->
<ul class="nav-menu">
<li id="active-home" class="nav-items">Home</li>
<li class="nav-items">About</li>
<li class="nav-items">Order</li>
<li class="nav-items">Contact</li>
<li class="nav-items">Cart</li>
</ul>
</div>
<div class="footer-nav">
<!--Footer portion of the side navbar-->
<div class="nav-social">
<!--Navigation of Bakingwithwill social media accounts-->
<ul class="nav-social-list">
<li class="social-icons">
<i class="fab fa-facebook"></i>
</li>
<li class="social-icons">
<i class="fab fa-instagram"></i>
</li>
</ul>
</div>
<p class="copyright">Copyright Bakingwithwill</p>
<!--Copyright-->
</div>
</nav>
<img class="header-banner" src="imgs/bww-home-banner.jpg" alt="Bakingwithwill bread banner"/>
<!--Main image-->
<div class="main">
<!--Contents outside the side navbar representing header page-->
<h2 class="baking-heading">Bakingwithwill</h2>
<h1 class="welcome-heading">Welcome!</h1>
<h2 class="intro-heading">Get a slice of the best bread in<br>
Chatham-Kent!</h2>
</div>
</header>
CSS:
/*Base styles*/
body {
font-family: 'Oswald', sans-serif;
}
h1 {
font-family: 'Satisfy', cursive;
}
/*Home styles*/
header {
width: 100%;
height: 585px;
}
/*Side bar navigation menu*/
.navigation {
height: 100%;
width:160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #3D3732;
overflow-x: hidden;
padding-top: 20px;
opacity: 90%;
}
.navigation a {
text-decoration: none;
}
.logo {
border-radius: 50%;
height: 70px;
width: 70px;
margin-top: 10px;
margin-left: 45px;
}
#active-home:link, #active-home:visited {
color:#E88F2A !important;
}
.navigation li, p {
text-decoration: none;
color: #FFFFFF;
display: block;
text-align: center;
}
.navigation .nav-items {
padding-right: 30px;
padding-top: 10px;
text-align: center;
}
.navigation .social-icons {
list-style-type: none;
text-align: center;
display: inline;
font-size: 15px;
padding: 5px;
margin-top: 50px;
color: #FFFFFF;
margin-left: 15px;
text-decoration: none;
}
.navigation li:hover {
color: #E88F2A;
}
.navigation p {
font-size: 10px;
text-align: center;
padding: 6px 8px 6px 16px;
}
.main {
margin-left: 160px;
padding: 0px 10px;
}
.footer-nav {
margin-top: 200px;
}
/*Social media icons*/
.navigation i {
text-decoration: none;
color: #FFFFFF;
}
.navigation i:hover {
color: #E88F2A;
}
/*Text overlaying the image*/
.baking-heading {
color: #E88F2A;
font-family: 'Satisfy', cursive;
position: relative;
margin-top: 40px;
padding-left: 50px;
font-size: 50px;
}
.welcome-heading, .intro-heading {
font-family: 'Oswald', sans-serif;
position: relative;
}
.welcome-heading, .baking-heading {
transform: rotate(-13deg);
}
.welcome-heading {
padding-left: 130px;
font-size: 50px;
color: #FFFFFF;
}
.intro-heading {
padding-top: 200px;
font-size: 50px;
text-align: center;
color: #FFFFFF;
}
.header-banner {
/*Image styles*/
margin-top: -40px;
position: absolute;
width: 100%;
height: 585px;
}
So for example, say I'm on the homepage, I specifically want that
colour to be orange for the home link, and then when I click on About
link, about link changes to orange and the home goes to default white
One CSS-only approach is to:
add a class to the <body> element of each page
add classes to each of your links (or to the list-items containing the links)
Home Page:
<body class="home-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
About Page:
<body class="about-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
Then you can change the color of the relevant link on each page:
.nav-items a {
color: white;
}
.home-page .nav-items.home a,
.about-page .nav-items.about a {
color: orange;
}
You need to add a class to the active link and #id is not recommended for styling. Also, the pseudo classes that you're using is blocking your desired outcome. Try changing :
#active-home:link,
#active-home:visited {
color: #e88f2a !important;
}
to:
.active {
color: #e88f2a !important;
}
Afterwards, place the .active class into your link code for each page. So for home it would be:
<li class="nav-items active">Home</li>
and for your about page:
<a href="#">
<li class="nav-items">Home</li>
</a>
<a href="about.html">
<li class="nav-items active">About</li>
</a>
and so on...
This question already has answers here:
How do I center floated elements?
(12 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I have a problem with my Nav Bar. I need it to be centered on the screen, so it is in the middle of everything. But my Nav Bar will only be on the left side of my screen.
I tried to use Margin to fix the issue, but then it will not be responsive to the rest, so that does not work.
Here is my code for the Nav Bar:
HTML:
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
Ignore the "href", they will be sorted afterwards
the CSS:
*{
margin: 0%;
padding: 0%;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav{
width: 100%;
height: 100px;
text-align: center;
display: inline-block;
}
ul{
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a{
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 200%;
padding: 0px 20px;
display: block;
display: inline-block;}
ul li a:hover {
color: red;
}
I did read some of the others answered questions but without any luck from them, hope you can help me once again!
Just add display: inline-block; to the CSS rule for ul to make it only as wide as its contents and therefore also to allow the text-align: center for nav to have an effect:
* {
margin: 0%;
padding: 0%;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav {
width: 100%;
height: 100px;
text-align: center;
display: inline-block;
}
ul {
display: inline-block;
text-align: center;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 200%;
padding: 0px 20px;
display: block;
display: inline-block;
}
ul li a:hover {
color: red;
}
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
Try putting the nav in center tags.
Like this:
<center>
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
</center>
Sorry if this doesn't help. I couldn't fully understand your problem.
Try this. Don't use <center> tag, it's obsolete.
html:
<header>
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</header>
css:
header { width: 100%; }
nav { width: 980px; margin: 0 auto; display: block; }
margin: 0 auto; will center the element. just make sure that it has a width, otherwise this will not work.
try this =)
* {
margin: 0;
padding: 0;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav {
position: absolute;
width: 100%;
height: 100px;
text-align: center;
display: block;
margin: auto;
border: 2px solid white;
}
ul {
display: inline-block;
text-align: center;
width: max-content;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
margin: auto;
}
ul li a {
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 100%;
padding: 0px 10px;
display: inline-block;
}
ul li a:hover {
color: red;
}
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
I want the text to be on the right side of my footer and the images to be on the left. Every time I had the float: right to the "footer li.pictures" the background colour disappears.
Before adding float: right:
http://i57.tinypic.com/2cp9mkj.png
After adding float: right:
http://i60.tinypic.com/206y1rr.png
html:
<div class="events">
<div class="row">
<div class="col span-12">
<footer>
<ul class="links">
<li class="links">Home</li>
<li class="links">Vendors</li>
<li class="links">Events</li>
<li class="links">Location</li>
<li class="links">Volunteer</li>
</ul>
<ul class="pictures">
<li class="pictures">
<a href="#">
<img src="images/insta.png" alt="instagram icon">
</a>
</li>
<li class="pictures">
<a href="#">
<img src="images/twit.png" alt="twitter icon">
</a>
</li>
<li class="pictures">
<a href="#">
<img src="images/face.png" alt="facebook icon">
</a>
</li>
</ul>
</footer>
</div>
</div>
</div>
css:
.row {
margin: 0 auto;
clear: both;
}
.col {
box-sizing: border-box;
float: left;
width: 100%;
margin: 0;
}
body {
margin: 0px 0;
}
footer {
background-color:#343434;
width: 100%;
margin-top: 20px;
height: auto;
font-family: 'billymedium';
font-size: 23px;
line-height: 23px;
}
footer a, a:visited {
color: #b7b7b7;
text-decoration: none;
}
footer a:hover {
color: #5a8747;
}
footer img {
max-width: 30px;
padding-top: 10px;
padding-bottom: 5px;
}
footer ul.links, ul.pictures {
list-style: none;
margin-top: 0;
padding: 0;
}
footer li:first-child {
display: inline;
margin-left: 0px;
}
footer li.links {
display: inline;
margin-left: 25px;
float: left;
padding-top: 15px;
}
footer li.pictures {
display: inline;
margin-right: 5px;
text-align: right;
}
Adding this CSS to your stylesheet should solve the problem:
footer {
overflow: hidden;
}
This is a clearing issue. You might have a .clearfix or .clear class made if this site is using a framework but basically it looks like this:
.clear {
clear: both;
}
Add this inside of the "col span-12" div right before it ends:
<div class="clear"></div>
If you don't want to create a class, this also works:
<div style="clear:both;"></div>