I am trying to make a dropdown-menu. So for this purpose, I've created a div and some anchor links inside, but the display: block; is not working. The cursor is default & the anchor does not seem to be a link.
Here is my HTML:
<div id="custom-wrapper">
<ul>
<li>View full profile</li>
<li>Logout</li>
</ul>
</div>
The CSS:
div#custom-wrapper
{
width: 200px;
height: auto;
position: fixed;
right: 15px;
top: 38px;
border-radius: 6px;
background: #fff;
border: 1px solid lightgrey;
}
div#custom-wrapper ul
{
list-style-type: none;
}
div#custom-wrapper ul li
{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
div#custom-wrapper ul li a
{
text-decoration: none;
display: block;
color: grey;
font-family: sans-serif;
border-bottom: 1px solid lightgrey;
}
What's wrong with my code?
Display block element works perfect, Just you need to remove padding and margin for ul element.
/*** Default CSS Attributes ***/
#custom-wrapper ul {
margin: 0;
padding: 0;
}
/*** Overwrite CSS Attributes ***/
#custom-wrapper ul {
margin: 0 !important;
padding: 0 !important;
}
div#custom-wrapper {
width: 200px;
height: auto;
position: fixed;
right: 15px;
top: 38px;
border-radius: 6px;
background: #fff;
border: 1px solid lightgrey;
}
div#custom-wrapper ul {
list-style-type: none;
margin: 0;
padding: 0;
}
div#custom-wrapper ul li {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
div#custom-wrapper ul li a {
text-decoration: none;
display: block;
color: grey;
font-family: sans-serif;
border-bottom: 1px solid lightgrey;
}
<div id="custom-wrapper">
<ul>
<li>View full profile</li>
<li>Logout</li>
</ul>
</div>
There is a padding for ul. Remove it:
div#custom-wrapper ul
{
list-style-type: none;
padding:0;
}
That is not the right way to build a dropdown. Check this (you would need to include Bootstrap library though, which by the way may make your life much easier).
Related
I want to know how to put a logo in my css navbar because I don't know how to put a logo in my css navbar. I have no clue on how to put the logo in the css navbar so it would be very nice if one of yall can help me out.
body {
margin: 0px;
}
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
background: #222;
padding: 0px;
}
li {
float: right;
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
img {
height: 70px;
}
<img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325">
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
The first thing you need to do is to create a columnar structure and have the background on the parent. And then add the logo to the left and links to the right. The best way to do is to use the <header> and <nav> tags as they are really semantic.
Here's something you might find useful:
body {
margin: 0px;
}
/* Add these */
header {
overflow: hidden;
background: #666;
}
header h1 {
float: left;
padding: 0 20px;
}
header nav {
float: right;
padding: 20px 0 0;
}
/* End Add these */
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
padding: 0px;
}
li {
float: left; /* Changed here. */
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
img {
height: 70px;
}
<header>
<h1>
<img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325" />
</h1>
<nav>
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
</header>
Also, I just changed the background colour from #222 to #666 to keep it websafe and also make the logo visible. Feel free to change it.
Preview
Here is a fiddle that I hope will help you get you on the right track;
https://jsfiddle.net/Lyrw49mj/7/
HTML
<ul>
<li class="NavHeader"><a><img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325"></a></li>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
CSS
body {
margin: 0px;
}
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
background: #222;
padding: 0px;
}
li {
float: right;
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
.NavHeader a img{
position: relative;
top: 0px;
left: 0px;
height: 70px;
width: auto;
}
.NavHeader a:hover{
border-bottom: none;
padding-bottom: 20px;
}
.LinkBar {
cursor: pointer;
width: 140px;
height: 37px;
border: 1px solid #c02c3a;
margin-top: 50px;
margin-left: 300px;
background-color: #c02c3a;
text-align: center;
padding-top: 9px;
color: white;
}
div.SampleMenu ul {
list-style-type: none;
width: 140px;
background-color: Grey;
margin-left: 300.5px;
padding: 0;
margin-top: 2px;
}
div.SampleMenu ul li {
color: White;
padding: 0;
display: none;
}
div.SampleMenu ul li a {
color: white;
display: block;
padding: 10px;
font-size: large;
text-align: center;
}
#HeaderBar:hover+.SampleMenu ul li {
display: block;
}
<div class="CentralHeader">
<div class="LinkBar" id="HeaderBar">All</div>
<div class="SampleMenu">
<ul>
<li>Movies</li>
<li>Events</li>
<li>Sports</li>
<li>Plays</li>
</ul>
</div>
</div>
In the above segment,I try to manipulate a user-drop down while an element
is hovered,but the drop down disappears as the cursor is moved towards
drop down. I want to select an item in drop down which needs drop down to
appear even on moving cursor from the specified element.How can I achieve
this?
Because you have applied display:block code to #HeaderBar hover and when your cursor goes to dropdown the hover code does not run.
So apply display:block on .SampleMenu ul:hover as well
#HeaderBar:hover+.SampleMenu ul,
.SampleMenu ul:hover {
display: block;
}
And also apply display:none to the .SampleMenu ul not each li elements of it.
Stack Snippet
.LinkBar {
cursor: pointer;
width: 140px;
height: 37px;
border: 1px solid #c02c3a;
margin-top: 50px;
margin-left: 300px;
background-color: #c02c3a;
text-align: center;
padding-top: 9px;
color: white;
}
div.SampleMenu ul {
list-style-type: none;
width: 140px;
background-color: Grey;
margin-left: 300.5px;
padding: 0;
margin-top: 0px;
display: none;
border-top: 2px solid #fff;
}
div.SampleMenu ul li {
color: White;
padding: 0;
}
div.SampleMenu ul li a {
color: white;
display: block;
padding: 10px;
font-size: large;
text-align: center;
}
#HeaderBar:hover+.SampleMenu ul,
.SampleMenu ul:hover {
display: block;
}
<div class="CentralHeader">
<div class="LinkBar" id="HeaderBar">All</div>
<div class="SampleMenu">
<ul>
<li>Movies</li>
<li>Events</li>
<li>Sports</li>
<li>Plays</li>
</ul>
</div>
</div>
I am trying to add a border-top with 2px on my fixed navbar however on the a href hover it pushes all of the nav items down by 2px, I am trying to make it so it's static, any help is appreciated.
.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
width: 100%;
height: 70px;
background-color: #3f3f3f;
}
.fixed-nav-bar li, .fixed-nav-bar a {
height: 0 auto;
line-height: 50px;
width: 100px;
overflow: hidden;
}
.menu {
width: 90%;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.menu a, .menu a:visited {
color: #ffffff;
overflow: hidden;
}
.menu a:hover, .menu a:target {
display: block;
border-top: 2px solid #72BCD4;
color: #72BCD4;
}
.menu-items { display: inline-block; }
.menu-items li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
}
.menu-items a {
text-decoration: none;
}
.show, .hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(../assets/down-arrow-icon.png);
}
.hide {
background-image: url(../assets/up-arrow-icon.png);
}
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<!-- Example responsive navigation menu -->
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li>HOME</li>
<li>ABOUT</li>
<li>DESIGNS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
It's because of no border. Either give a transparent border with the same width or use the colour of the border. But in your case, it's screwed up. So I changed the overflow: hidden and used margin-top: -2px:
.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
width: 100%;
height: 70px;
background-color: #3f3f3f;
}
.fixed-nav-bar li, .fixed-nav-bar a {
height: 0 auto;
line-height: 50px;
width: 100px;
}
.menu {
width: 90%;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.menu a, .menu a:visited {
color: #ffffff;
}
.menu a:hover, .menu a:target {
display: block;
border-top: 2px solid #72BCD4;
color: #72BCD4;
margin-top: -2px;
}
.menu-items {
display: inline-block;
}
.menu-items li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
}
.menu-items a {
text-decoration: none;
}
.show, .hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(../assets/down-arrow-icon.png);
}
.hide {
background-image: url(../assets/up-arrow-icon.png);
}
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<!-- Example responsive navigation menu -->
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li>HOME</li>
<li>ABOUT</li>
<li>DESIGNS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
That's all because of box-sizing property. by default it adds value of paddings/margins/borders outside of content area, so element becomes bigger. Just define globally * {box-sizing: border-box;} it will make elements to fixed sizes. That means if element had no border, and then it adds, the element's area for content will be smaller, but the whole size will be the same. However, I strongly recommend you to use border at the beginning, otherwise, it will jump inside the element. You can set the color 'transparent' and it won't be visible. Then just by changing border-color it will be nicer.
I have created a little fiddler:
https://jsfiddle.net/marco_rensch/0hva2241/
this could be a possible solution
checkout CSS Code Changes between row 31 and 51
the key is to add a default border 2px transparent to the li's and change it by hover:
.menu-items li:hover{border-top: 2px solid #72BCD4;}
The styling I look into achieving can be shown in this screenshot:.
Please tell how to create the effect that i pointed out using CSS.
a{
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
This should work for links, however the effect in the picture seems to be made with the link's container border:
div.yourcontainer:hover{
border-bottom:2px solid red;
}
This should work ^^
By using :hover and setting a border-bottom. Something like this
ul{
list-style: none;
padding: 0;
margin: 0;
}
ul li{
float: left;
margin: 0 5px;
}
ul li a{
text-decoration:none;
color: black;
}
ul li:hover{
border-bottom: 2px solid red;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
a {
display: inline-block;
position: relative;
text-decoration: none;
text-align: center;
}
a:hover:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
box-shadow: inset 0 -10px 0 #11c0e5;
}
a span {
display: block;
width: 100px;
height: 40px;
background-color: red;
padding-top: 20px;
}
<a href="#">
<span>link texts</span>
</a>
In my set up I have my navigation bar set horizontally and contained within my header div like this:
<div id="header-section">
<div id="main-menu-wrapper">
<ul id="main-menu">
<li>Home</li>
<li>Services
<ul id="sub-men">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
My problem is that the sub-menu is not showing because the height on "main-menu-wrapper" is set to auto. The sub-menu is showing when I set a height like 100px. When I set the position on the sub-menu to static instead of absolute, it expands the entire main-menu-wrapper. How can I get the sub-menu to show properly?
Here's the CSS portion for my whole header section:
#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
background: #740600;
}
#main-menu-wrapper {
position: relative;
width: 74%;
min-width: 600px;
height: auto;
margin: 0% auto;
}
#main-menu {
list-style: none;
font-weight: bold;
line-height: 150%;
}
#main-menu li {
position: relative;
float: right;
margin: 0px 5px;
}
#main-menu a {
padding: 3px;
color: #ffffff;
background: #740600;
text-decoration: none;
border-radius: 5px;
}
#main-menu a:hover {
padding: 3px;
color: #740600;
background: #ffffff;
text-decoration: none;
}
#main-menu li ul {
position: absolute;
display: none;
}
#main-menu li ul li{
float: none;
}
#main-menu li:hover ul {
display: block;
}
#main-menu li ul a {
padding: 3px;
color: #ccc;
background: #740600;
text-decoration: none;
border-radius: 5px;
}
#main-menu li ul a:hover {
padding: 3px;
color: #740600;
background: #ccc;
text-decoration: none;
}
#banner-wrapper {
position: relative;
padding: 5px 0 5px;
}
#banner {
position: relative;
max-width: 75%;
min-width: 600px;
margin: 0% auto;
background: #ffffff;
}
#logo {
max-width: 600px;
height: auto;
}
I'm a little confused by what you're asking here, but I created a fiddle where your menu shows.
I deleted the styles for #main-menu-wrapper and I removed the background color on #header-section.
Hopefully this can be a decent starting point for you: http://jsfiddle.net/44vRN/
#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
}
You could try to use absolute positioning on the submenu to remove it from the document flow.