When I hover over the main Icon of the first ul of my nav part, the dropdown menu appears in perfect location, however, when I hover over the sub menu items, a slight indentation appears that I can't seem to find the cause for.
Hovering over the three dots "..." icon:
Hovering over the sub item of the menu:
you can clearly see the indentation when I hover over the sub menu which I colored violet upon hover over, which is exactly when the indentation will occur.
.main-navigation {
position: absolute;
right: 0px;
margin-top: -20px;
margin-right: 15px;
width: 2em;
height: 2em;
color: #D9D9D9;
border: 1px solid #D9D9D9;
/* padding: auto; */
align-content: center;
}
.firstLevelul{
padding-left: 0;
list-style: none;
justify-content:flex-end;
}
.firstLevela{
display: block;
text-align: center;
font: normal small-caps 100 20px/1.8em 'Helvetica Neue';
text-decoration: none;
}
.firstLevela:hover{
color: #D9D9D9;
width: 1.5em;
height: 1.5em;
}
.secondLevelul{
display: none;
}
.secondLevela{
display: block;
}
.secondLevelli:hover{
background-color: violet;
}
.firstLevelli:hover > .secondLevelul{
display: block;
width: 200px;
height: 200px;
background-color: white;
border: 1px solid #D9D9D9;
margin-left: -169px;
}
<nav class="main-navigation">
<ul className="firstLevelul">
<li className="firstLevelli">
<MoreHorizIcon className="editDropDownIcon" />
<ul className="secondLevelul">
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
<li className="secondLevelli"><a className="secondLevela" href="#">sub menu</a></li>
</ul>
</li>
</ul>
</nav>
This was a little hard to work with as you didn't provide much code.
But I believe the issue is based on your height: 1.5em in the firstLevela:hover selector in CSS.
I made this incredibly rudimentary JSFiddle to demonstrate
https://jsfiddle.net/t7gj9qx2/
Yes, that is due to em height, which gets height from the parent element font size. It is preferable to use rem or px.
Related
I have a annoying bug with my website where when i preview my website with live server, there is a unwanted horizontal scroll bar when there is no content in the scrolled area. I am a new developer so i come across many errors which mostly i can resolve. Can someone help me with the error in my code which is causing the horizontal scroll bar.`
This is my HTML
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
h1 {
color: pink;
padding-top: 10px;
padding-left: 10px;
font-family: sans-serif;
text-align: center;
}
p {
color: pink;
font-family: sans-serif;
padding-left: 5px;
text-align: center;
}
.titles {
border: 3px solid #fff;
padding-top: 30px;
padding-bottom: 30px;
}
header ul li {
color: pink;
list-style-type: none;
padding-left: 40px;
padding-right: 40px;
padding-top: 30px;
padding-bottom: 30px;
}
header ul {
display: flex;
position: relative;
left: 400px;
}
header a {
text-decoration: none;
color: pink;
}
<header>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</header>
<div class="titles">
<h1>HI, I'm Anas and I'm a Junior Webdeveloper.</h1>
<p>
I have recently started coding and I am looking to persue a career in software engineering and web developing.
</p>
</div>
Adjust your header ul css to leverage flexbox so you don't need the padding-left: 400px, which is causing the unwanted horizontal scroll:
header ul {
display: flex;
justify-content: flex-end;
}
This happens in HTML when the content goes beyond the width of the screen. A quick fix is too add
overflow-x:hidden
So in your style tag add
body{
overflow-x:hidden;
}
To read more on the overflow property
https://www.w3schools.com/cssref/pr_pos_overflow.asp
Happy Coding!
I am working on making menu header for my webpage.
Here is my jsfiddle.
All my image and texts should stay on that grey color but somehow it is going haywire.
Image is getting shown at the bottom and height of that grey color should be little bit more so that it looks decent.
I am not sure what I did wrong.. Here is my html and CSS:
<div class="topnav">
<ul>
<li class="home">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
</li>
<li class="dropdown">
<b>INSURANCE</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i></li>
<li><i>CORPORATE</i></li>
</ul>
</li>
<li class="our-story">OUR STORY</li>
<li class="login-signup">Log In | Sign up</li>
<li class="get-covered">GET <strong style="font-style:italic">COVERED</strong></li>
</ul>
</div>
My CSS:
li.insurance{
margin-right: 60px;
}
li.home{
margin-right: 60px !important;
position: relative;
top: 15px;
left: 10px;
}
li.our-story{
margin-right: 120px !important;
}
li.login-signup{
margin-right: 20px !important;
font-style: italic;
font-family: fontawesome;
}
li.get-covered{
border-color: #EF7440;
border-style: solid;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
padding-right: 30px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 20p;
padding-bottom: 40px;
background-color: rgba(0, 0, 0, 0.5);
}
li.home{
margin-right:35px;
}
li{
display: inline;
}
.topnav{
overflow: hidden;
}
.topnav ul > li{
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
.topnav a{
text-decoration: none;
font-size: 17px;
color: white;
display: block;
}
/* dropdown menus hidden initially */
.topnav ul > li > ul{
display: none;
margin-top: 14px;
width: 200px;
padding: 0;
position: absolute;
background-color: #f76c38;
}
.topnav ul > li > ul > li{
float: left;
clear: left;
display: block;
text-align: left;
}
Any thoughts what I did wrong?
So.. A lot of things are going wrong here, but I guess you are looking for something like this:
https://jsfiddle.net/3kw1uLrs/35/
The code I added is the following and I stripped the ul styling you had added. I used the background color on the topnav element.
You can use this a base to continue your work.
.topnav {
background:rgba(0, 0, 0, 0.5);
padding:0 15px;
}
.logo {
float:left;
margin-top:15px;
}
.nav-left {
float:left;
}
.nav-right {
float:right;
}
I also took the logo out of the list and placed it in an anchor element - you most probably going to need it for linking to your homepage:
<a class="logo">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
</a>
Some tips:
You should not try to place everything as a li element under a single ul.
In this case I took the logo out od the lists and divided your list in two separate lists to place them accordingly.
Never position elements using margins.
Try to group them and place them using floats, text-centering, etc.
I'm working on the navigation bar for a website and currently the main menu is complete. However, the "Services" and "Products" buttons need to each have their own sub-menu. The sub-menu should normally be hidden from view and appears when the user mouse-overs on the respective button.
Here is a fiddle with the desired result. Obviously, I'd rather not use any javascript if possible.
The idea I had initially was to have sub-menu have position: absolute with a z-index value lower than that of the main-menu, so that it can slide underneath the main-menu. However, doing so messes up with the width if I give it width: 100% and since my site is responsive, I avoid static widths.
I also tried doing with relative positioning, but that doesn't work either.
Another thing I don't like with that approach is that the markup for the main menu and sub-menu get split. Is it possible to get the above result, but with this markup?
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services
<ul>
<li role="presentation">Link 1
<li role="presentation">Link 2
</ul>
</li>
<li role="presentation">Products
<ul>
<li role="presentation">Link 3
<li role="presentation">Link 4
</ul>
</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
Here is my code:
CSS
body {
font-size: 0;
}
.bodyframe {
display: inline-block;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}
.div_container {
max-width: 1460px;
width: 100%;
display: inline-block;
margin: 0 auto;
}
header {
width: 100%;
height: 49px;
}
.nav {
display: block;
position: relative;
list-style: none;
background: #304770;
z-index: 10;
}
.nav li {
display: inline-block;
background-color: #304770;
margin: 0 5px;
}
.nav li a {
padding: 12px 15px;
font-size: 18px;
color: #EFEFEF;
display: block;
}
.nav li.active a {
color: orange;
}
.nav li.active a:before {
width: 100%;
}
.nav li a:hover {
background-color: #304770;
color: orange;
transition: color 0.25s;
}
.nav li a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background-color: orange;
-webkit-transition: width 0.2s;
transition: width 0.2s;
}
.nav li:nth-last-of-type(1) a:after {
display: none;
}
.nav li a:hover:before {
width: 100%;
}
.nav li a:after {
content: "";
display: block;
position: absolute;
right: -8px;
top: 21px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
.subnav {
list-style-type: none;
display: block;
position: relative;
top: -49px;
margin: 0;
z-index: 1;
background-color: #ccc;
-webkit-transition: top 0.2s;
}
.subnav li {
display: inline-block;
background-color: #ccc;
margin: 0 5px;
}
.subnav li a {
padding: 8px 10px;
font-size: 14px;
color: #EFEFEF;
display: block;
}
HTML
<div class="bodyframe div_container">
<header>
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services</li>
<li role="presentation">Products</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
<ul class="subnav">
<li>Test</li>
<li>1243</li>
</ul>
</header>
</div>
If you only need the submenu to mimic the one in the example, without using jQuery, using the second chunk of HTML with the CSS you supplied you could do:
nav:hover~ul {
top: 0px;
}
This shows the next ul element, in this case the subnav, whenever the nav is hovered over ("~" selector means select the ul element preceded by nav:hover).
However, if you want to do something more dynamic... id suggest just using JS/jQuery as well
I want to create smooth dropdown menu. The idea is: when clicking on orange element it will toggle black elements, and when clicking on black element it will toggle grey elements. But what i got is black element covering orange element with grey elements already toggled. I've used display:none; everywhere to make sure that it won't show up and.. Everything is toggled after clicking orange element. Using .hide() also doesn't want to help hide this elements. How can i make this black box (after click event) toggle below orange element and don't show grey? Also i don't know how to make grey element to not hide when someone will click on it.
$(".d").click(function(){
$(".d ul li").slideToggle(200);
});
$(".a").click(function(){
$(".b").slideToggle(200);
});
#container
{
width: 200px;
height: 500px;
background-color: rgba(0, 0, 0, 0.3);
overflow-y: scroll;
overflow-x: hidden;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
.a, .c
{
position: relative;
display: none;
width: 200px;
height: 100px;
margin-bottom: 10px;
background-color: black;
cursor: pointer;
}
.b
{
position: relative;
display: none;
margin-bottom: 5px;
padding: 0;
height: 100px;
width: 200px;
background-color: rgba(0, 0, 0, 0.6);
}
.d, .e
{
font-size: 20px;
position: relative;
width: 200px;
height: 100px;
margin-bottom: 10px;
background-color: orange;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div id="container">
<ul>
<li class="d">1
<ul>
<li class="a"></li>
<ul>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
</ul>
<li class="c"></li>
<li class="c"></li>
</ul>
</li>
<li class="d">2</li>
</ul>
</div>
The page is getting over,so it can't scroll down so you should add element and can also use href="#id/.classname" inside element
for hide and then for looking page this can be done
$(document).ready(function(){
$(".a").hide();
$(".b").hide();
$(".d").click(function(){
$(".d").fadeIn('fast');
});
$(".a").click(function(){
$(".b").fadeIn('fast');
});
I have made a nav out of css drawn circles as anchor elements. They all have varying amounts of text in them causing them to spill out of the circles. So I have used a JS solution to horizontally align the text to the middle of the circle. The problem I now have is that the circles baselines are unequal depending on how many lines of text are in them. Is there an easy css solution to this. Or will I have to calculate and amend the heights of each list item with javascript as well?
.html
<ul class="list-inline nav-horizontal">
<li role="presentation" class="active">
#1
</li>
<li role="presentation">
#2
</li>
<li role="presentation">
#3
</li>
<li role="presentation">
#4
</li>
<li role="presentation">
#5
</li>
</ul>
.css
.list-inline {
display: inline-block;
padding: 6px;
}
.stylish {
display: block;
width: 140px;
height: 140px;
border-radius: 50%;
border: 8px solid #ED1B24;
font-size: 20px;
color: #BBAE92;
text-align: center;
text-decoration: none;
background: none;
line-height: 1.1em;
}
.stylish:hover, li.active .stylish {
color: #fff;
text-decoration: none;
background: #ED1B24;
}
.js
$("a.stylish").contents().wrap("<span>");
$("a.stylish span").css({
position : "relative",
"top" : function() {
return ($(this).parent().height() - $(this).height()) / 2
}
});
How about this? http://jsfiddle.net/hd8donbn/3/
.nav-horizontal li:before {
content:'';
display: inline-block;
vertical-align: middle;
height: 100%
}
.stylish {
display: inline-block;
text-decoration: none;
color: #ED1B24;
vertical-align: middle;
max-width: 90%
}
If its ok i will explain everything :D
I found a simple css solution. Adding vertical-align:text-top; to the class of .list-inline li solved the issue
well, not to be rude here, but i've written a markup of my own to cater to you needs, disregarding what you've given in your question. Hope you find it usefull:
HTML
<ul>
<li class="active">small</li>
<li>medium content</li>
<li>a bit larger content<`enter code here`/li>
<li>really large hunk of content</li>
<li>this is a rrrrreeeeaaaalllllllyyyyy big chunk, with a long word too</li>
</ul>
css
*{
margin: 0;
padding: 0;
}
ul {
display: inline-block;
list-style: none; /*remove markers for `li`*/
}
li {
border-radius: 50%; /*border-radius 70px;*/
overflow: hidden; /*hide overflowing text, if any*/
float: left; /*puts things in line, with their tops aligned. */
/*If `display:inline-block` is used, it will match the bottoms at same level. try it*/
border: 8px solid #ED1B24;
display: block;
height: 140px;
text-align: center;
width: 140px;
}
li a{
padding: 0 5px; /*prevent border cutting*/
word-wrap: break-word; /*breaks long words*/
text-decoration: none;
color: #BBAE92;
/*the next 4 allow a child to be centered vertically*/
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
li.active,
li:hover{
cursor: pointer; /*makes it look like a link*/
background: #ED1B24;
}
li.active a,
li:hover a{
color: #fff;
}
and some minor js
$('li').click(function(){
$(this).child('a').click();
});