I am trying to get the second navbar to align on the right, I have tried adding float:right and have tried adding a margin on the right to space out the words but does not work. Tried removing the nav tag and replacing it with section but it does not work.
/* NAV ON TOP*/
.pagetopTop{
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 500;
transition: ease-in-out 0.3s;
padding-bottom: 20px;
}
.topNav{
display: flex;
float: right;
}
.Topspan{
margin: var(--size-10);
}
/*navbar*/
.navbar .container{
top: 0;
right: 0;
left: 0;
z-index: 500;
transition: ease-in-out 0.3s;
display:flex
}
.navbar-brand{
height: var(--size-50);
margin-top: var(--size-40);
cursor: pointer;
}
.navbar-nav{
display: flex;
align-items: center;
}
.navbar-nav li{
align-items: center;
position: absolute;
}
body{
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: 0;
color: var(--font-color-base);
margin: 0;
padding: 0;
}
*,
::after,
::before{
box-sizing: border-box;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{ text-decoration: none;}
p{ margin-top: 0;}
h2{
font-size: 1.75rem;
font-weight: 500;
line-height: 1.2;
}
img{
max-width: 100%;
vertical-align: middle;
border-style: none;
}
.container{
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin-left: auto;
margin-right: auto;
}
<body>
<section id="pagetopTop" class="pagetopTop">
<div class="container">
<i class="fas fa-angle-left"></i>
<span class="Topspan">Main Demos</span>
<ul class="topNav">
<li class="nav-link">
<span class="Topspan">Demos</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="nav-link">
<span class="Topspan">Docs</span>
<i class="fas fa-angle-down"></i>
</li>
</ul>
</div>
</section>
<nav id="Nav" class="navbar nav">
<div class="container">
<a href="" class="">
<img src="Week5saasappassets-210323-142515 (1)/Week-5-saas-app-assets/project_logo/logo.svg" alt="Company logo" class="navbar-brand">
</a>
<ul class="navbar-nav">
<li class="nav-link">
Home
</li>
<li class="nav-link">
Features
</li>
<li class="nav-link">
Learn
</li>
<li class="nav-link">
Price
</li>
<li class="nav-link">
Hire us
</li>
</ul>
</div>
</nav>
</body>
Maybe because of the margins or parent elements overlapping each other.
want to move the ul list to the other side beneath demos and space it out
There are a few issues here, in terms of HTML semantics, it doesn't make a lot of sense to use <section> for a nav menu. The <section> represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. A page without content and only a navigation menu wouldn't make very much sense.
Use a more semantic element like <nav> which represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. At worse, a division element <div> which doesn't have semantic meaning would make more sense than a <section> for a navigation menu. Also, you have display: flex and float: right on the .topNav container. Flexbox is the "newer" way to distribute space for items along a single axis so use one or the other, not both.
Instead of using a float to create layouts by floating elements to the left or the right, flexbox allows you to create layouts by aligning items to a single axis. The axis can be horizontal or vertical. It is best used for distributing space for items in the same axis
Your using a bunch of FontAwesome icons but didn't include the <script> tag in your example so none of them rendered. Next, the position: fixed on the <section> container paired with absolute positioning of the <li> elements, this is causing some of the menu items to overlap since your taking the content out of the "normal flow". Unless that was intended, I'm not sure what the exact "expected output" is since you didn't include a picture.
For positioning two elements at opposite sides in a row, just use a Flexbox layout to distribute "space between" the two nav menus in the <body> using justify-content: space-between. I added a nested <div> to the <body> that will act as the flex container containing the two <nav> menus. You can also vertically align flex items (e.g. the two nav menus) along the cross-axis with align-items: center. I will let you take it from here to style the nav menus on each side of the viewport how you would like.
/* NAV ON TOP*/
.flexbox {
display: flex;
justify-content: space-between;
align-items: center;
}
.pagetopTop{
/*position: fixed;
top: 0;
right: 0;
left: 0;*/
z-index: 500;
transition: ease-in-out 0.3s;
padding-bottom: 20px;
}
.topNav{
display: flex;
justify-content: space-between;
align-items: center;
}
.Topspan{
margin: var(--size-10);
}
/*navbar*/
.navbar .container{
/*top: 0;
right: 0;
left: 0;*/
z-index: 500;
transition: ease-in-out 0.3s;
display:flex;
align-items: center;
margin-top: 1rem;
}
.navbar-brand{
height: var(--size-50);
margin-top: var(--size-40);
cursor: pointer;
}
.navbar-nav{
display: flex;
flex-direction: column;
align-items: center;
}
.navbar-nav li{
align-items: center;
/*position: absolute;*/
}
body{
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: 0;
color: var(--font-color-base);
margin: 0;
padding: 0;
}
*,
::after,
::before{
box-sizing: border-box;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{ text-decoration: none;}
p{ margin-top: 0;}
h2{
font-size: 1.75rem;
font-weight: 500;
line-height: 1.2;
}
img{
max-width: 100%;
vertical-align: middle;
border-style: none;
}
.container{
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin-left: auto;
margin-right: auto;
}
<body>
<div class="flexbox">
<nav id="pagetopTop" class="pagetopTop">
<div class="container">
<i class="fas fa-angle-left"></i>
<span class="Topspan">Main Demos</span>
<ul class="topNav">
<li class="nav-link">
<span class="Topspan">Demos</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="nav-link">
<span class="Topspan">Docs</span>
<i class="fas fa-angle-down"></i>
</li>
</ul>
</div>
</nav>
<nav id="Nav" class="navbar nav">
<div class="container">
<a href="" class="">
<img src="https://dynamic.brandcrowd.com/asset/logo/8cb54db0-7219-4bf6-bba3-1c9e94078516/logo?v=4" width="60" height="60" alt="Company logo" class="navbar-brand">
</a>
<ul class="navbar-nav">
<li class="nav-link">
Home
</li>
<li class="nav-link">
Features
</li>
<li class="nav-link">
Learn
</li>
<li class="nav-link">
Price
</li>
<li class="nav-link">
Hire us
</li>
</ul>
</div>
</nav>
</div>
<!-- Font Awesome Script -->
<script src="https://kit.fontawesome.com/e03d7ac5cf.js" crossorigin="anonymous"></script>
</body>
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:
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>
For part of a site I'm making, I'm looking to have a grid of square objects, and have them pack together tightly so there's no spaces.
Here is what I have made:
But here's what I want it to look like:
So far I've only been doing this by padding and adding margins, and then by vertically aligning each list item. But I want it to go one step further than vertical alignment, I want each item to fit directly underneath the one above it.
I'm sure there's a very different, better approach than the one I've taken, which would be great too!
Here's what I have done:
HTML:
<header class="results">
<ul class="container">
<li>
<a id="name">Temp</a>
<a id="position">Temp</a>
</li>
<li>
<a id="name">Temp</a>
<a id="position">Temp</a>
<a id="position">Temp</a>
</li>
<li>
<a id="name">Temp</a>
<a id="position">Temp</a>
</li>
<li>
<a id="name">Temp</a>
<a id="position">Temp</a>
</li>
<li>
<a id="name">Temp</a>
<a id="position">Temp</a>
</li>
<li>
<a id="name">Temp</a>
<a id="position">Temp</a>
</li>
</ul>
</header>
CSS:
body {
margin: 0;
}
.page {
background: #fff;
}
header.results {
max-width: 100%;
}
header.results .container {
padding: 1em 0 2em;
margin: 0px auto 3px;
line-height: 1;
}
header.results .container li {
width: 30%;
display: inline-block;
padding: 2em 2em 0.75em;
margin: 0px auto 3px;
background: rgb(240,240,240);
vertical-align: top;
}
header.results .container li #name {
text-align: center;
display: block;
margin-top: 0.5em;
font-weight: 500;
}
header.results .container li #position {
text-align: center;
display: block;
margin-top: 0.5em;
font-weight: 250;
font-size: 85%;
}
If you're not supporting older browsers (IE 8 & 9), you could implement this with CSS columns, as shown here.
For full browser support, I'd go with the jQuery masonry plugin.