Did I make a dropdown menu where I run into problems when I align the menu on the right side in the browser? The last submenu item sits further out of the browser's box-model. How do I control the placement of the dropdown (left, center and right)? Follow the link below:
.navbar-menu-one {
display: flex;
}
ul {
position: relative;
background-color: gray;
margin: 0px;
padding: 0px;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
color: white;
padding: 23px;
display: block;
}
ul li:hover {
background-color: #ccc;
}
ul ul {
position: absolute;
min-width: 200px;
display: none;
background-color: #ccc;
}
ul ul li {
display: block;
background-color: #e3e3e3;
}
ul li:hover ul {
display: block;
}
.item-nav-right {
float: right;
margin-right: 0px;
}
<nav class="navbar-menu-one item-nav-right">
<ul>
<li>Menu</li>
<li>Menu
<ul style="">
<li>
Link</li>
<li>
Link</li>
<li>
Link</li>
</ul>
</li>
<li>Menu</li>
<li>Menu
<ul>
<li>
Link</li>
<li>
Link</li>
<li>
Link</li>
</ul>
</li>
</ul>
</nav>
Link : Codepen
Based on the code and the existing resources, I managed to fix it by implementing the syntax below and the element
display: flex;
flex-direction: row-reverse;
direction: rtl;
improvement :
ul {
position: relative;
background-color: gray;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: row-reverse;
direction: rtl;
}
Related
I need to have image on left side and navbar on right side... but the navbar must be vertically centered with image.. On jsfiddle I made it up to set navbar vertically to center but I am not able to put it on the right side... I will be glad for any help.
JSFiddle: https://jsfiddle.net/polluxik/0Lqubpe6/20/
ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
align-items: center;
}
ul img {
height: 100px;
}
li a {
display: block;
color: #262353;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png">
<li><a class="active" href="#">test</a></li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
*in jsfiddle I used random image from google as a placeholder
One approach is below, with corrected HTML (the only valid child of a <ul> or <ol> is an <li>, so the <img> is now appropriately wrapped):
ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
align-items: center;
/* aligning the content of the <ul> to the end
of the inline axis: */
justify-content: end;
}
ul img {
height: 100px;
}
li a {
display: block;
color: #262353;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li:first-child {
/* setting the margin of the inline-end of the
first-child <li> element to 'auto', in order
to push the first-child away from the rest of
the content: */
margin-inline-end: auto;
}
<ul>
<!-- wrapped the <img> in another <li> element for validity: -->
<li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png"></li>
<li><a class="active" href="#">test</a></li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
JS Fiddle demo.
References:
justify-content.
margin-inline-end.
We can define the image and navbar items in different div and then using flexbox we can align the two div horizontally using justify-content:space-between.
ul {
display: flex;
justify-content: space-between;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
align-items: center;
}
.nav {
display: flex;
gap: 10px;
}
ul img {
height: 50px;
}
<ul>
<div class='logo'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png">
</div>
<div class='nav'>
<li><a class="active" href="#">test</a></li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</div>
</ul>
Hi I can't seem to be removing the background color after shifting elements. While the elements have moved and they are working perfectly but every timeenter image description here I am clicking on the sign in and sign up, the original space seems to show up as the background color.
HTML code:
<nav>
<ul>
<li><a class="active" href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
<li>Blog</li>
<li>Categories
<ul>
<li>Romance</li>
<li>Paranormal</li>
<li>Thriller</li>
<li>Horror</li>
</ul>
</li>
<li>Reviews
<ul>
<li>Star Rating 1</li>
<li>Star Rating 2</li>
<li>Star Rating 3</li>
<li>Star Rating 4</li>
<li>Star Rating 5</li>
</ul>
</li>
<li>Contest
<ul>
<li>Giveaways</li>
<li>Free Books for Reviews</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>For Authors</li>
<li>For Bloggers</li>
</ul>
</li>
<li><i class="fa fa-user-plus" aria-hidden="true"></i>Sign Up</li>
<li><i class="fa fa-fw fa-user"></i>Sign In</li>
</ul>
</nav>
CSS code:
/* navigation top menu */
nav{
position: relative;
top:0;
left:0;
padding: 5px 0 0 0;
width: 100%;
font-size: 1em;
}
.active
{
background-color: #F24F1B;
color: white;
}
nav::after{
content:'';
display: block;
clear:both;
}
nav ul{
list-style: none;
margin:0;
padding:0;
position: relative;
right: 200px;
}
nav ul li:hover {
background-color: #F24F1B;
}
nav ul li:hover > ul {
display: block;
}
nav ul li a {
display: inline-block;
color:black;
padding: 10px 20px;
text-decoration: none;
width: 125px;
position: relative;
}
nav ul li a:visited {
color:black;
}
nav ul li a .active{
color: white;
}
nav ul li a:hover {
background-color: #F24F1B;
color: white;
}
nav ul ul {
position: relative;
top: 100%;
background-color: #F24F1B;
display: none;
position: relative;
right: 0px;
}
nav ul ul li {
position: relative;
border-bottom: 2px solid rgb(128, 104, 104);
}
nav ul ul ul {
left: 100%;
top: 0px;
}
/* top level */
nav>ul {
padding-left: 200px;
color:white;
}
nav>ul>li {
float: left;
}
nav>ul>li>a {
width: auto;
padding: 10px 20px 15px 20px;
}
.signed {
position: relative;
left: 300px;
}
Your issue is because your background-color is on the li and not on a.signed but you are moving your a.signed with left: 300px; and not the li.
If you put the class .signed to the list item instead of the link, it will work as you'd expected.
Here's the code with the fix: https://codepen.io/MateoStabio/pen/rNWeYXd
I do recommend looking into restructuring your navigation entirely so that the right nav doesn't jump when you hover items on the left navigation.
.signed {
background-color: transparent;
position: relative;
left: 300px;
}
Try This one.
How can I get it so when I hover over Menu item 2 it will show the submenu-container?
Codepen
Do I need to add something on the LI or the A tag? I have tried
ul li a:hover .submenu-container {
display: block;
}
but it didn't work
<ul>
<li>
Menu 1
</li>
<li>
Menu 2
</li>
</ul>
<div class="submenu-container">
<ul class="Sub-Menu">
<h3>SubMenu 1</h3>
<li>
Sub-Menu 1
</li>
<li>
Sub-Menu 2
</li>
</ul>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.submenu-container {
padding: 50px 20px;
background-color: red;
display: none;
}
ul {
list-style: none;
}
ul li {
margin: 10px 0;
}
ul li a {
text-decoration: none;
display: block;
font-size: 1.2rem;
}
Your ideas are appreciated.
Many thanks
Paul
I would organize so that the submenu div is inside the menu 2 li and add:
ul li:hover .submenu-container {
display: block;
}
See the full working example here:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.submenu-container {
flex-wrap: nowrap;
justify-content: space-between;
padding: 50px 20px;
background-color: red;
display: none;
}
ul li:hover .submenu-container {
display: block;
}
ul {
list-style: none;
}
ul li {
margin: 10px 0;
}
ul li a {
text-decoration: none;
display: block;
font-size: 1.2rem;
}
<div class=wrap>
<ul>
<li>
Menu 1
</li>
<li>
Menu 2
<div class="submenu-container">
<ul class="Sub-Menu">
<h3>SubMenu 1</h3>
<li>
Sub-Menu 1
</li>
<li>
Sub-Menu 2
</li>
</ul>
</div>
</li>
</ul>
</div>
I've changed you css selector to ul li:hover .submenu-container
And then moved your sub-menu so it is inside the li with the hover selector
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.submenu-container {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
padding: 50px 20px;
background-color: red;
display: none;
}
ul {
list-style: none;
}
ul li {
margin: 10px 0;
}
ul li a {
text-decoration: none;
display: block;
font-size: 1.2rem;
}
ul li:hover .submenu-container {
display: block;
}
<ul>
<li>
Menu 1
</li>
<li>
Menu 2
<div class="submenu-container">
<ul class="Sub-Menu">
<h3>SubMenu 1</h3>
<li>
Sub-Menu 1
</li>
<li>
Sub-Menu 2
</li>
</ul>
</div>
</li>
</ul>
Currently my HTML is displaying like this:
I want it to display like this:
The buttons need to be vertically aligned with the text using flex-box, or another method that does not require padding, margin (margin:auto is fine), or offsets.
http://codepen.io/simply-simpy/pen/vKpAYN
HTML:
<ul class="nav">
<li>about
<button>+</button>
<ul>
<li>Level 2 nav item
<button>+</button>
<ul>
<li>Level 3 nav item</li>
<li>Level 3 nav item</li>
<li>Level 3 nav item</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.nav {
width: 300px;
}
button {
display: inline-block;
width: 25px;
height: 25px;
align-self: flex-end;
}
ul {
list-style-type: none;
}
ul > ul li{
padding-left: 20px;
}
ul > ul > ul li {
padding-left: 40px;
}
li {
display: flex;
flex-direction: column;
line-height: 3;
}
a {
border-top: 1px solid black;
}
You can group button and a in one div and use display: flex on that div with align-items: center to vertically center items.
.nav {
width: 300px;
}
button {
width: 25px;
height: 25px;
}
ul {
list-style-type: none;
}
ul > ul li {
padding-left: 20px;
}
ul > ul > ul li {
padding-left: 40px;
}
li {
width: 100%;
border-top: 1px solid black;
}
a {
padding: 20px 0;
display: block;
}
div {
display: flex;
align-items: center;
justify-content: space-between;
}
<ul class="nav">
<li>
<div>
about
<button>+</button>
</div>
<ul>
<li>
<div>
Level 2 nav item
<button>+</button>
</div>
<ul>
<li>Level 3 nav item
</li>
<li>Level 3 nav item
</li>
<li>Level 3 nav item
</li>
</ul>
</li>
</ul>
</li>
</ul>
I am trying to figure out why the third level of my drop down menu is not stretching to the width of the text that is contained within it. So far the text just automatically indents to the next line but all the other li's do not do this and are on a single line. Can someone help me find out why this is happening? Thank you!
here is the example I have made so far: http://themedwebdesign.com/salmon/
here is the html
<header>
<div class="container clearfix">
<div id="logo"><img src="./img/salmon-logo.png" alt=""></div>
<nav>
<ul>
<li>Home</li>
<li>Pages
<ul>
<li>About</li>
<li>Services</li>
<li>Meet the Team</li>
</ul>
</li>
<li>Features
<ul>
<li>Feature</li>
<li>Level 3
<ul>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio
<li>Blog
<ul>
<li>Single</li>
<li>Large</li>
<li>Medium</li>
<li>Small</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
and here is the css, I apologize its made using sass. If the compiled css file is needed then I will post it.
nav {
float: right;
ul {
list-style: none;
position: relative;
display: inline-block;
margin: 0;
li {
float: left;
text-transform: uppercase;
font-weight: 300;
a {
text-decoration: none;
color: inherit;
padding: 15px 25px;
display: block;
}
&:hover {
color: $colorSite;
}
&:hover > ul {
display: block;
}
}
&:after {
content: "";
clear: both;
display: block;
}
ul {
position: absolute;
top: 100%;
display: none;
padding: 0;
margin: 0;
border: 1px solid $colorSite;
li {
float: none;
position: relative;
a {
color: $colorDark;
text-decoration: none;
display: block;
padding: 15px 25px;
background-color: #fff;
&:hover {
color: #fff;
background-color: $colorSite;
}
}
}
ul {
position: absolute;
left: 100%;
top: 0;
}
}
}
}
If you want to stretch and don't want the 2nd line, you can simply do this in your css
header nav ul ul li a { white-space: nowrap; }
Just make width: 100%; under css header nav ul ul ul
white-space: nowrap; will prevent the text from wrapping.
header nav ul ul li {
float: none;
position: relative;
white-space: nowrap;
}