I have a code for breadcrumb I have styled it but not showing as expected any help please will help. Here are both my code and CSS style and the final output am getting
.breadcrumb {
font-size: var(--font-small);
padding: 0 .5rem;
}
.breadcrumb ul .flexitem {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumb li:not(:last-child)::after {
display: inline-block;
margin: 0 .35rem;
content: '/';
}
.breadcrump li:last-child {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--light-text-color);
}
<div class="single-product">
<div class="container">
<div class="wrapper">
<div class="breadcrumb">
<ul class="flexitem">
<li>Home</li>
<li>Novels</li>
<li>The river and the source</li>
</ul>
</div>
</div>
</div>
</div>
In your code you are .breadcrumb ul .flexitem this should be .breadcrumb ul.flexitem since "flexitem" is a class on the ul and not a child of the ul-element.
.breadcrumb {
font-size: var(--font-small);
padding: 0 .5rem;
}
.breadcrumb ul.flexitem {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumb li:not(:last-child)::after {
display: inline-block;
margin: 0 .35rem;
content: '/';
}
.breadcrump li:last-child {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--light-text-color);
}
<div class="single-product">
<div class="container">
<div class="wrapper">
<div class="breadcrumb">
<ul class="flexitem">
<li>Home</li>
<li>Novels</li>
<li>The river and the source</li>
</ul>
</div>
</div>
</div>
</div>
Related
My dropdown effect is not working what am I doing wrong. I have tried by putting display to none and using the :hover but nothing works.
As soon as I hover over the Menu, .drp-btn:hover .menu-content-container doesn't work.
<div class="nav-container">
<div class="drp-btn"> Menu </div>
<div class="menu-content-container">
<ul class="menu-content">
<li>Home</li>
<li>About</li>
<li>Booking</li>
</ul>
</div>
</div>
.nav-container {
margin-top: 2px;
display: flex;
flex-direction: column;
}
.menu-content-container {
border: 5px solid red;
}
.drp-btn {
margin-left: 60vw;
border: 2px solid red;
font-size: 20px;
}
.drp-btn:hover .menu-content-container {
display: flex;
background-color: red;
color: white;
}
.menu-content-container {
display: none;
}
.nav-container ul li {
margin-left: 2%;
list-style-type: none;
}
.nav-container a {
font-size: 20px;
text-decoration: none;
}
<div class="nav-container">
<div class="drp-btn"> Menu
<div class="menu-content-container">
<ul class="menu-content">
<li>Home</li>
<li>About</li>
<li>Booking</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
wrap the code drp-btn div
You need to wrap your menu-content-container into the drp-btn div to make that work:
.nav-container {
margin-top: 2px;
display: flex;
flex-direction: column;
}
.menu-content-container {
border: 5px solid red;
}
.drp-btn {
margin-left: 60vw;
border: 2px solid red;
font-size: 20px;
}
.drp-btn:hover .menu-content-container {
display: flex;
background-color: red;
color: white;
}
.menu-content-container {
display: none;
}
.nav-container ul li {
margin-left: 2%;
list-style-type: none;
}
.nav-container a {
font-size: 20px;
text-decoration: none;
}
<div class="nav-container">
<div class="drp-btn"> Menu
<div class="menu-content-container">
<ul class="menu-content">
<li>Home</li>
<li>About</li>
<li>Booking</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
I'm having some trouble making a nav menu and its sub menu to display via the pseudo checkbox toggle. I looked at some guides and tried some, but I'm not getting the result I wanted -- the menus does not appear when toggle the checkbox on.
https://codepen.io/UnorthodoxThing/pen/paMBQB
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Natural Pasta</title>
<link rel="stylesheet" type="text/css" href="style-index.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Gloria+Hallelujah|Gorditas|Lobster|Nunito|Shadows+Into+Light|Varela+Round" rel="stylesheet">
<body>
<div class="wrapper">
<!-- Top Menu-->
<img class="top-logo" src="img/NPDesign_full-transparent-bg-1.png" alt="NP full logo" width="220px" height="220px">
<div class="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
<div class="dropdown-menu">
<input type="checkbox" id="A">
<label for="A">Menu</label>
<ul>
<li>Pastas To Go</li>
<li>Sauces To Go</li>
<li>
<div class="dropdown-readymeals">
<input type="checkbox" id="A-C">
<label for="A-C" style="font-size:10pt;">Ready Meals...</label>
<ul>
<li>Arancinis</li>
<li style="font-size:10pt;">Garlic Bread</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>Find Us</li>
</ul>
</div>
</div>
<div class="banner">
<!--
<img src="img/NPDesign_full-transparent-bg-1.png" alt="NP full logo" width="300px" height="300px">
-->
</div>
<div class="body-content">
<div class="specials-title"><h3>- SPECIALISING IN -</h3></div>
<div class="specials-content">
<div class="specials-boxes"><div class="specials-text"><h3>Freshly Hand Made Pastas</h3></div><div class="specials-img"><img src="freshlyhandmadepastas-1.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Gourmet Pasta Meals</h3></div><div class="specials-img"><img src="gourmetpastameals-3.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Traditional Home Made Sauces</h3></div><div class="specials-img"><img src="traditionalhomemadesauces.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Variety of Filled Pastas</h3></div><div class="specials-img"><img src="varietyoffilledpastas-1.jpeg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Home Made Soups</h3></div><div class="specials-img"><img src="homemadesoups-2.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Gourmet Rolls</h3></div><div class="specials-img"><img src="gourmetroles-1.jpg"></div></div>
</div>
</div>
<div class="footer">
<!--<div class="grid">-->
<div class="upper-footer-container">
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Follow Us</h4>
<ul class="social-networks">
<li class="flex-items"><img src="fb-icon.png"></img></li>
<li class="flex-items"><img src="instagram-icon.png"></img></div></li>
</ul>
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Opening Hours</h4> <br>
<ul class="contact-details">
<li>Monday: 9am-5:30pm</li>
<li>Tuesday: 9am-5:30pm</li>
<li>Wednesday: 9am-5:30pm</li>
<li>Thursday: 9am-9pm</li>
<li>Friday: 9am-5:30pm</li>
<li>Saturday: 9am-5pm</li>
<li>Sunday: 10am-5pm</li>
</ul>
</div>
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Contact Us</h4> <br>
<ul class="contact-details">
<li>Add.: 152 Bunnerong Rd, Eastgardens NSW 2036</li>
<li>No.: (02) 8347 1988</li>
<li>Email</li>
<br>
<li>Catering Available</li>
</ul>
</div>
</div>
<div class="lower-footer-container">NaturalPasta © 2018</div>
<!--/div>-->
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: 1px solid red;
}
html {
height: 100%;
}
body {
min-height: 100%;
min-width: 100%;
}
.wrapper {
min-height: 100%;
width: 100%;
position: relative;
background: url("img/pasta-food-wallpaper-4.jpg") no-repeat;
background-size: 1350px 670px;
background-position: center;
background-attachment: fixed;
}
body {
height: 100%;
background: #ddd;
}
.nav {
height: 204px;
width: 100%;
margin: 0 auto; /* Centers navigation */
text-align: center;
text-transform: uppercase;
background: black;
display: flex;
justify-content: flex-end;
align-items: flex-end;
font-family: 'Gloria Hallelujah', cursive;
color: #ee6f20;
font-weight: bold;
font-size: 13pt;
}
.nav ul li {
height: 41px;
width: 125px;
background: #000;
}
.nav .dropdown-menu ul, .dropdown-menu .readymeals ul {
background: #000;
}
.nav a {
text-decoration: none;
color: #ee6f20;
}
.dropdown-menu ul li, .dropdown-readymeals ul li {
display: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
}
.dropdown-menu ul {
position: absolute;
display: none;
}
input[type=checkbox] {
display: none;
}
input#A:checked ~ .dropdown-menu ul li {
display: block;
max-height: 100%;
}
input#A-C[type=checkbox]:checked ~ .dropdown-readymeals ul li {
display: block;
}
/*tbc */
.dropdown-menu ul li {
font-size: 11pt;
background: #000;
}
.nav ul {
list-style: none;
display: inherit;
}
.nav ul li, .nav ul ul, .nav ul ul li, .nav label {
cursor: pointer;
}
.top-logo {
margin: auto 0;
position: absolute;
left: 42%;
margin-top: -15px;
}
.body-content {
background-color: #000;
}
.specials-content {
position: relative;
display: flex;
flex-wrap: wrap;
color: orange;
justify-content: center;
}
.specials-title h3 {
width: 100%;
display: block;
margin-top: 0px;
padding-top: 75px;
color: #ee6f20;
}
.specials-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 35px 75px;
padding: 50px 100px;
/*adjust margin height-width*/
}
.specials-text, .specials-img {
padding: 35px;
display: flex;
align-items: center;
}
.specials-text h3 {
text-align: center;
font-family: 'Gloria Hallelujah', 'cursive';
color: #ee6f20;
}
.specials-img img {
width: 300px;
height: 300px;
border-radius: 25px 5px 25px 5px;
}
h3 {
text-align: center;
font-family: 'Gloria Hallelujah', 'cursive';
color: #eee;
}
.footer {
bottom: 280px;
padding: 150px;
width: 100%;
text-align: center;
background: rgb(0,0,0);
color: white;
font-family: sans-serif;
display: flex;
flex-flow: wrap;
}
.upper-footer-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
}
.footer-container-1 {
width: 250px;
display: block;
margin: 25px;
}
.social-networks {
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.flex-items a img {
width: 50px;
height: 50px;
border-radius: 25px;
margin: 25px;
}
.contact-details {
list-style: none;
font-family: 'ubuntu', sans-serif;
}
.lower-footer-container {
width: 100%;
justify-content: center;
display: flex;
flex-wrap: wrap;
margin-top: 45px;
}
Is it to do with the html? The CSS? What could be interfering from displaying the menu and its submenu? :/
Much appreciated for the long run.
(P.S. I have other source image used in here, though that should not conflict with what I'm trying to resolve.)
In your code the <ul> tag is the sibling of selector input#A
But you have written css code as if .dropdown-menu is the sibling of selector input#A. This is why your code at this particular point doesn't work.
You have to target <ul> when input#A is clicked. <ul> is the sibling of input#A.
Change the css code on line 81 as below
input#A:checked ~ ul li {
display: block;
max-height: 100%;
}
This code change will make your sub-menu visible when you click Menu as shown in below image.
i'm mentioning the fix only for this particular point. In your codepen i can see that you've made this same mistake in few other places. You have to fix it.
Hope this helps.
I am trying to create a header bar with logo on the right, horizontal navigation on the left as usual. I need navigation items to be centered to the logo vertically.
I have tried several methods. I would appreciate if someone could show me the way around and explain why it worked, and what I was probably missing.
body {
max-width: 995px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
font-family: 'Arial';
}
a {
text-decoration: none;
color: #222;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.logo img {
max-width: 235px;
height: auto;
float: left;
}
.menu li {
display: inline-flex;
padding-left: 30px;
}
.menu {
float: right;
}
.nav {
padding-bottom: 25px;
}
.group:after {
content: "";
display: table;
clear: both;
}
<div class="nav group">
<div class="logo"><img src="img/ahlogo.png" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Thoughts</li>
<li>Contact</li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>
Thank you very much!
I suppose you want to align the navigation to the bottom end of the logo? If yes, you can use display:flex with the following settings on the parent element of both:
.nav.group {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
body {
max-width: 995px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
font-family: 'Arial';
}
.nav.group {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
a {
text-decoration: none;
color: #222;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.logo img {
max-width: 235px;
height: auto;
float: left;
}
.menu li {
display: inline-flex;
padding-left: 30px;
}
.menu {
float: right;
}
.nav {
padding-bottom: 25px;
}
.group:after {
content: "";
display: table;
clear: both;
}
<div class="nav group">
<div class="logo"><img src="http://placehold.it/120x120/0af" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Thoughts</li>
<li>Contact</li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>
Alternatives: If you want to center-align them vertically, change align-items: to center; (or to top for top alignment)
body {
max-width: 995px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
font-family: 'Arial';
}
.nav.group {
display: flex;
justify-content: space-between;
align-items: center;
}
a {
text-decoration: none;
color: #222;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.logo img {
max-width: 235px;
height: auto;
float: left;
}
.menu li {
display: inline-flex;
padding-left: 30px;
}
.menu {
float: right;
}
.nav {
padding-bottom: 25px;
}
.group:after {
content: "";
display: table;
clear: both;
}
<div class="nav group">
<div class="logo"><img src="http://placehold.it/120x120/0af" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Thoughts</li>
<li>Contact</li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>
This uses display:flex to set items in a line.
If you need to use browsers that do not support display:flex (I think IE<9) and you want a different way, let me know.
Open sans included because I like how it looks.
Orange used to demonstrate the middle-ness of the elements.
This will work if you know the height of the logo. If it is unknown, or perhaps changes height (a lot of places have navbars that shrink down a bit once the page scrolls) you may need a different solution.
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
.nav {
display: flex;
background-color: orange;
margin: 0;
padding: 0;
height: 50px;
font-family: "Open Sans";
font-weight: bold;
justify-content: space-between;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu ul li {
display: inline-block;
padding: 5px 10px;
box-sizing: border-box;
line-height: 40px;
font-size: 20px;
}
.menu ul li:first-child {
margin-left: 10px;
}
.menu ul li a {
text-decoration: none;
}
<div class="nav group">
<div class="logo"><img src="//placehold.it/200x50" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Thoughts</li>
<li>Contact</li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>
I am trying to make a Navigation Bar for the top of my page
.header {
width: 100%;
background-color: #2C2F33;
border-bottom: 2.5px #FF9F00 solid;
font-size: 15px;
}
#logo img {
float: left;
margin: 0;
padding: 20px;
width: 187.5px;
height: 63.75px;
}
.navbar {
display: flex;
justify-content: space-between;
}
.navbar,
li {
display: inline;
padding: 0 22.5px 0 22.5px;
}
.navbar,
li,
a {
text-decoration: none;
list-style-type: none;
}
.navbar,
li,
a:hover {
color: #FF9F00;
text-decoration: none;
list-style-type: none;
}
#dollarydoos,
#dsh {
color: #FF9F00;
}
#dosh {
color: #FFFFFF;
}
<div class="header">
<div id="logo">
<img src="./img/logo.png"></img>
</div>
<div class="navbar">
<div id="leftnavbar">
<ul>
<li><span id="dollarydoos">Dollarydoos:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>
</ul>
</div>
<div id="rightnavbar">
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
<li>Button4</li>
</ul>
</div>
</div>
</div>
I cant get the buttons and the dollardoos to have a small box that surrounds it (inside) and to align to the center of the logo and get listed in line in the center.
Like this:
How can I do this as I am not too experienced in HTML/CSS. I am a newbie trying to build his own site.
I made a flexbox of the header and removed display:inline for the navbar
.header {
width: 100%;
background-color: #2C2F33;
border-bottom: 2.5px #FF9F00 solid;
font-size: 15px;
display: flex;
align-items: center;
}
#logo img {
margin: 0;
padding: 20px;
width: 187.5px;
height: 63.75px;
}
.navbar {
display: flex;
justify-content: space-between;
margin-left: auto;
}
li {
display: inline;
padding: 0 22.5px 0 22.5px;
}
.navbar,
li,
a {
text-decoration: none;
list-style-type: none;
}
.navbar,
li,
a:hover {
color: #FF9F00;
text-decoration: none;
list-style-type: none;
}
#dollarydoos,
#dsh {
color: #FF9F00;
}
#dosh {
color: #FFFFFF;
}
<div class="header">
<div id="logo">
<img src="http://placehold.it/200x100">
</div>
<div class="navbar">
<div id="leftnavbar">
<ul>
<li><span id="dollarydoos">Dollarydoos:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>
</ul>
</div>
<div id="rightnavbar">
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
<li>Button4</li>
</ul>
</div>
</div>
</div>
How to center ul inside of div.
A common advice are
left:50%
some variations of display:inline
but it does not work. How to fix this?
body {
margin: 0;
background: #f4f5f5;
}
.menu {
text-align: center;
margin: 0 auto;
width: 1023px;
background: #f4f5f5;
}
.picture {
margin: 0 auto;
width: 1023px;
height: 255px;
background: green;
}
ul {
list-style: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<div class="content">
<div class="menu">
<ul>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
</ul>
</div>
<div class="picture">
</div>
</div>
set text-align:center and to ul and inline-block to li(removing float:left)
Tweaked your code, by removing duplicated code.
body {
margin: 0;
background: #f4f5f5;
}
.content {
margin: 0 auto;
width: 1023px;
}
.picture {
height: 255px;
background: green;
}
ul {
list-style: none;
background: #f4f5f5;
padding: 0;
margin: 0;
text-align: center;
}
li {
display: inline-block
}
li a {
display: block;
padding: 14px 16px;
text-decoration: none;
}
<div class="content">
<ul>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
<li><a>Test</a>
</li>
</ul>
<div class="picture">
</div>
</div>
This should solve the problem
body{
margin:0;
background:#f4f5f5;
}
.menu {
text-align: center;
margin: 0 auto;
width: 1023px;
background: #f4f5f5;
}
.picture {
margin:0 auto;
width: 1023px;
height: 255px;
background: green;
}
ul {
list-style: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
display: inline-block;
}
li{
float:left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<div class="content">
<div class="menu">
<ul>
<li><a>Test</a></li>
<li><a>Test</a></li>
<li><a>Test</a></li>
<li><a>Test</a></li>
<li><a>Test</a></li>
<li><a>Test</a></li>
<li><a>Test</a></li>
</ul>
</div>
<div class="picture">
</div>
</div>
Use a CSS3 Layout mode called Flexbox.
.menu {
display: flex; // <-- necessary to activate flexbox
justify-content: center; // <-- centers horizontally
// align-items: center; // <-- would center vertically
margin: 0 auto;
width: 1023px;
background: #f4f5f5;
}
learn more:
http://flexboxin5.com/
http://flexboxfroggy.com/