Im added tab for the image icon , im try to do that when i click the button (active button) after image icon change to be book_hover.png font color is change but image icon not change ,how to replace the image after NavTab active moment
.footer-tab .tooter-nav-tab {
padding: 2rem;
height: 10vh;
width: 100%;
margin-left: 0rem;
background: white;
border-top: 1px solid #c9cfd9;
display: inline;
text-align: center;
}
p.tab-txt {
font-size: 0.7rem;
}
.footer-tab ul {
list-style-type: none;
margin: 0;
padding: 0;
border-top: 1px solid #c9cfd9;
overflow: hidden;
background-color: #ffffff;
}
.footer-tab li {
float: left;
}
.footer-tab .nav-tabs .nav-link.active {
color: white;
background-color: #8bb6f3;
border-color: #ddd #ddd #fff;
}
.footer-tab li a {
display: block;
color: #3f5370;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
.footer-tab li a:hover {
background-color: #8bb6f3;
color: white;
}
.footer-tab-img :active {
background:url'https://image.ibb.co/ffSy9F/book_hover.png')no-repeat;
color: white;
}
/*footernavtab*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="footer-tab">
<ul class="nav nav-tabs" role="tablist">
<li class="img-01 w-25"><a href="" class="nav-link"}}
<span class="footer-tab-img active">
<img src="https://image.ibb.co/mOHJbv/book.png" alt="book" border="0">
</span>
<p class="tab-txt">Book</p>
</a>
</li>
</ul>
</div>
Finally i fixed my issue, im used this class footer-tab-img-01 and added separate color image and code crete like this
`span.footer-tab-img-01 { background: url('/Image/users.png') no-repeat; width: 32px; height: 32px; display: block; margin-left:1.2rem; }
.nav-link.active span.footer-tab-img-01 { background: url('/Image/users-hover.png') no-repeat; width: 32px; height: 32px; display: block; margin-left:1.2rem; }`
<div class="footer-tab">
<ul class="nav nav-tabs" role="tablist">
<li class="img-01 w-25"><a href="" class="nav-link"}}
<span class="footer-tab-img-01">
</span>
<p class="tab-txt">Book</p>
</a>
</li>
</ul>
</div>
Related
Beginner to CSS and I'm trying to build a Nav;
So far I have the following CSS code. I want the .btn font color to be white. I've tried using !important; but also not working.
any ideas what is overriding the font color and what I can do to change it?
/* navigation */
nav {
width: 503px;
height: 45px;
font-family: Roboto;
font-size: 16px;
font-weight: 500;
float: right;
color: #646881;
}
nav li {
display: inline;
padding-right: 20px;
}
nav a:link {
color: #646881;
}
nav a:hover {
color: #646881
font-style: italic;
}
nav a:active {
color: #646881;
}
nav a:visited {
color: #646881;
}
img.logo{
max-height: 45px;
max-width: 105px;
border-top: 40px;
margin-left: 60px;
float: left;
padding: 5px;
}
.btn {
background-color: #646881;
width: 75px;
border-radius: 4%;
border: none;
color: #ffffff;
}
HTML
Yes, sorry here is the HTML:
<header role="header">
</div>
<img border="0" class="logo" src="/assets/images/logo.png" alt="David Bowie Personas Logo">
<!-- Nav-->
<nav id="MainMenu" role="navigation">
<ol>
<li>
About
</li>
....
<li>
Shop
</li>
</ol>
</nav>
</header>
/* navigation */
nav {
width: 503px;
height: 45px;
font-family: Roboto;
font-size: 16px;
font-weight: 500;
float: right;
color: #646881;
}
nav li {
display: inline;
padding-right: 20px;
}
nav a:hover {
color: #646881
font-style: italic;
}
img.logo{
max-height: 45px;
max-width: 105px;
border-top: 40px;
margin-left: 60px;
float: left;
padding: 5px;
}
a.btn {
background-color: #646881;
width: 75px;
border-radius: 4%;
border: none;
color: #ffffff;
display: block;
padding: 10px;
text-align: center;
}
<header role="header">
<img border="0" class="logo" src="/assets/images/logo.png" alt="David Bowie Personas Logo">
<!-- Nav-->
<nav id="MainMenu" role="navigation">
<ol>
<li>
About
</li>
....
<li>
Shop
</li>
</ol>
</nav>
</header>
You are referring to an HTML-tag with nav i assume that you got a div-element with a class-name, in that case you shall use a dot .nav
I'm trying to do a nav menu in a particular style, It needs to be a bunch of square buttons/list items, then when you hover over an item, the background behind the item changes color, a decent height above the item and behind the drop down list, as seen in the image below.
My issue is that Im curious if I'm doing it the most efficient way and also when I hover over the initial item, it is working but then you go to one of the drop down items and the main/parent item disappears into the background.
Code:
body {
background-color: #00aeef;
}
.navBG {
background-color: #fff;
}
nav {
padding-top: 100px;
padding-left: 100px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
}
li {
display: inline-block;
display: inline;
float: left;
background-color: #00aeef;
border: solid 4px #fff;
width: 150px;
}
li a {
display: block;
padding: 10px 5px;
color: #fff;
text-align: center;
}
li a:hover {
color: #fff;
border: solid 4px #00ee98;
border-top: solid 100px #00ee98;
margin-top: -100px;
}
.droplinks {
position: absolute;
background-color: #00aeef;
min-width: 150px;
display: none;
margin-left: -2px;
}
.droplinks a {
padding: 10px;
display: block;
border: solid 2px #00ee98;
}
.droplinks a:hover {
color: #fff;
}
.dropbutton:hover .droplinks {
display: block;
}
<div class="container-fluid navBG">
<nav>
<ul>
<li>Home
</li>
<li class="dropbutton">Products
<div class="droplinks">
Widgets
Cogs
Gears
</div>
</li>
<li class="dropbutton">
Services
<div class="droplinks">
Handshakes
Winks
Smiles
</div>
</li>
<li>Shop
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
Then on hovering a menu item, it changes to this;
However, when I then go to a sub menu item the top level item messes up as in the example above. Would could be done to resolve this?
take a look at this fiddle,
and here is how you can properly show the sub menu on hovering on menu item:
li:hover .droplinks{
display: block;
}
body {
background-color: #00aeef;
}
.navBG {
background-color: #fff;
}
nav {
text-align:center;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
vertical-align: middle;
}
li {
display: inline-block;
display: inline;
float: left;
background-color: #00aeef;
width: 150px;
position: relative;
}
li a {
display: block;
padding: 10px 5px;
color: #fff;
text-align: center;
border-width: 30px 5px;
border-color: #fff;
border-style: solid;
}
li:hover a {
color: #fff;
border-color:#00ee98;
}
.droplinks {
background-color: #00aeef;
top: 100%;
display: none;
margin-left: 0;
min-width: 150px;
position: absolute;
margin-top: -15px;
}
.droplinks a {
padding: 10px;
display: block;
border-width: 2px 4px;
border-style: solid;
border-color:#00ee98;
}
.droplinks a:hover {
color: #fff;
}
.dropbutton:hover .droplinks {
display: block;
}
<div class="container-fluid navBG">
<nav>
<ul>
<li>Home
</li>
<li class="dropbutton">Products
<div class="droplinks">
Widgets
Cogs
Gears
</div>
</li>
<li class="dropbutton">
Services
<div class="droplinks">
Handshakes
Winks
Smiles
</div>
</li>
<li>Shop
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
link to codepen
I'm trying to make it so there is a max-height (or height) set to this very long list, and for the rest to scroll. I was able to easily achieve that with
height:800px;
overflow:scroll;
The Problem I have is that the "#subcategory" items stop displaying on hover when I apply overflow:scroll
Any ideas are greatly appreciated!
Basic HTML Structure
<!-- Start Auto Transport -->
<li id="topCategory">Auto Transport
<ul id="subContainer">
<li id="subCategory">Auto Insurance</li>
<li id="subCategory">Auto Payment</li>
<li id="subCategory">Gas</li>
<li id="subCategory">Parking</li>
<li id="subCategory">Public Transportation</li>
<li id="subCategory">Service Parts</li>
<!-- add new becomes text field, user enters text then it becomes added as category -->
<li class="hideNewCategory">
<a class="mmNewCat" data-number="1" href="#"><i class="icon ion-plus-circled"></i>Add New Category</a>
<input id="mmCat1" class="mmCatInpt" type="text" placeholder="Enter New Category" maxlength="25"></input>
</li>
</ul>
</li>
<!-- End Auto Transport -->
<!-- Start Bills Utilities -->
<li id="topCategory">Bills & Utilities
<ul id="subContainer">
<li id="subCategory">Domain Names</li>
<li id="subCategory">Fraud Protection</li>
<li id="subCategory">Home Phone</li>
<li id="subCategory">Hosting</li>
<li id="subCategory">Mobile Phone</li>
<li id="subCategory">Television</li>
<li id="subCategory">Utilities</li>
<!-- add new becomes text field, user enters text then it becomes added as category -->
<li class="hideNewCategory">
<a class="mmNewCat" data-number="2" href="#"><i class="icon ion-plus-circled"></i>Add New Category</a>
<input id="mmCat2" class="mmCatInpt" type="text" placeholder="Enter New Category" maxlength="25"></input>
</li>
</ul>
</li>
<!-- End Bills Utilities -->
relevant CSS
ul li:hover #topContainer{
display: block;
}
ul li a {
display: block;
color: $blue;
text-decoration: none;
font-family: verdana;
font-size: 14px;
}
#topContainer{
list-style: none;
color: $blue;
width: 260px;
height: auto;
background: $white;
opacity: 0.9;
position: absolute;
z-index: 1000;
height:800px;
overflow:scroll;
}
#topCategory {
float: none;
width: auto;
height: 20px;
text-align: left;
margin-left: 15px;
}
#topCategory a:hover {
color: $white;
background-color: $blue;
}
#topCategory:hover #subContainer {
display: block;
}
#topCategory a {
font-size: 16px;
position: relative;
bottom: 41px;
margin-top: 46px;
margin-left: -15px;
padding: 20px 0 20px 20px;
border-bottom:1px solid $grey-10;
}
#topCategory a:hover {
color: $white;
}
#subContainer {
list-style: none;
color: $blue;
display: none;
font-size: 12px;
min-width: 230px;
width: 150px;
height: auto;
background: $white;
opacity: 0.9;
margin: -107px 0 0 245px; position: absolute;
z-index: 1000;
white-space:nowrap;
}
#subContainer a{
border-bottom:1px solid $grey-10;
margin-top: 41px;
}
#subCategory {
float: none;
width: auto;
height: 20px;
text-align: left;
margin-left: 10px;
}
#subCategory:hover {
background: none;
}
.active {
background: $white;
}
#subCategory {
float: none;
// hover length
width:215px;
// hover length
text-align: left;
height: 25px;
margin-left: 15px;
margin-right: -43px;
}
Subcategory should be a Class name not an Id element, change that and things will look cleaner.
.subcategory {
}
<div class="subcategory"></div>
I've been following a tutorial to create mobile navigation without Javascript and the idea behind this is to use a checkbox and the :checked CSS selector. I managed to get it working when I tested it out on a blank page but then when I tried to integrate it into my actual site it stopped working. I'll show the code for both so you can see where perhaps I've gone wrong (note that DIV IDs and classes have changed between the two documents but I've made sure the HTML has also changed accordingly so that's not the problem).
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: black;
background: #ac3333;
text-align: center;
padding: 10px 10px;
border: 1px black solid;
}
#menu {
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
#hamburger {
display: inline-block;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: black;
}
That's the working code. Here's the non-working code. In the non-working code, clicking the button does not do anything and I can't work out why!
body {
margin: 0;
line-height: 1.428;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
}
#mobile-nav {
display: none;
}
#regular-nav {
display: block;
}
.show-menu {
text-decoration: none;
color: black;
background: #ac3333;
text-align: center;
padding: 10px 10px;
border: 1px black solid;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #mobile-nav {
display: block;
}
#hamburger {
display: inline-block;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: black;
}
#media only screen and (max-width: 768px) {
#mobile-navigation-btn {
display: block;
}
#regular-nav {
display: none;
}
}
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1000px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">Menu
<div id="hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</label>
<input type="checkbox" id="show-menu" role="button">
</div>
<div id="regular-nav">
<ul>
<li>Home
</li>
<li>Customer Research
</li>
<li>Business Improvement
</li>
<li>Contact Us
</li>
<li>Blog
</li>
</ul>
</div>
</div>
</div>
<div id="mobile-nav">
<ul>
<li>Home
</li>
<li>Customer Research
</li>
<li>Business Improvement
</li>
<li>Contact Us
</li>
<li>Blog
</li>
</ul>
</div>
Its not working because of your css selector, the input and the menu need to be siblings the way you currently have the css set. Read this post to understand further the ~ operator
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
body {
margin: 0;
line-height: 1.428;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
<!--display: none;
-->
}
#mobile-nav {
display: none;
}
.show-menu {
text-decoration: none;
color: black;
background: #ac3333;
text-align: center;
padding: 10px 10px;
border: 1px black solid;
}
/*Hide checkbox*/
input[type=checkbox] {
<!--display: none;
-->
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #mobile-nav {
display: block;
}
#hamburger {
display: inline-block;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: black;
}
#media only screen and (max-width: 768px) {
#mobile-navigation-btn {
display: block;
}
#regular-nav {
display: none;
}
}
<!doctype html>
<head>
<script>
// Picture element HTML5 shiv
document.createElement("picture");
</script>
<script src="picturefill.min.js" async></script>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1000px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">Menu
<div id="hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</label>
</div>
</div>
</div>
<input type="checkbox" id="show-menu" role="button" />
<div id="mobile-nav">
<ul>
<li>Home
</li>
<li>Customer Research
</li>
<li>Business Improvement
</li>
<li>Contact Us
</li>
<li>Blog
</li>
</ul>
</div>
</body>
</html>
I have following code:
<div class="settingsMenu" style="top: 135px; left: 149px; display: block;">
<ul>
<li class="download" onclick="downTemplate('template1')">Download</li>
<li class="delete" onclick="showConfirmationDialog ($(this))">
Delete
<div class="deleteItemConfirmation">
<div class="confirmationText">Are you sure?</div>
<div class="buttons"><button onclick="deleteTemplate ('template1')">Yes</button> <button onclick="hideConfirmationDialog();">No</button></div>
</div>
</li>
<li class="info">Info</li>
</ul>
</div>
CSS:
.settingsMenu{
position: absolute;
top: 0;
left: 0;
display: none;
background-color: #FFFFFF;
border: 1px solid #b5044a;
border-radius: 5px;
width: 150px;
padding: 10px 0;
margin: 0;
z-index: 200;
}
.settingsMenu ul{
list-style-type: none;
width: 100%;
margin: 0px;
padding: 0;
}
.settingsMenu ul li {
color: #000000;
cursor: pointer;
float: left;
font-size: 14px;
font-weight: normal;
font-family: Arial;
height: 18px;
max-width: 100px;
margin: 5px 20px;
padding: 0;
display: block;
padding-left: 30px;
}
.settingsMenu ul li.edit{
background: url("../img/edit-context-menu-icon.svg") no-repeat scroll center left white;
}
.settingsMenu ul li.delete{
background: url("../img/delete-context-menu-icon.svg") no-repeat scroll center left white;
}
.settingsMenu ul li.info{
background: url("../img/info-context-menu-icon.svg") no-repeat scroll center left white;
}
Problem is: while div.deleteItemConfirmation has "display: none;" everything is displaying correctly, when it`s display property becomes "display: block;" strange space appears before text of
<li>Delete</li>
Try changing
<li class="delete" onclick="showConfirmationDialog ($(this))">
Delete
To
<li class="delete" onclick="showConfirmationDialog ($(this))">Delete
Could this help you out:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
or
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
or with comments...
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
I took the idea from http://css-tricks.com/fighting-the-space-between-inline-block-elements/ and helped me in a few similar situations.