I could't fix the hover of my nav bar to fulrange the hole Square on my Li elements,here is my code so you can understand me ,Please help.
I could't fix the hover of my nav bar to fulrange the hole Square on my Li elements,here is my code so you can understand me ,Please help.
https://jsfiddle.net/h41zhwrx/
<body>
<!** Social Media Icons**>
<div class='social-wrap'>
<ul>
<li><a class='facebook1' href='http://www.facebook.com/username' target='_blank' title='Facebook' rel='nofollow'></a></li>
<li><a class='twitter1' href='http://twitter.com/username' target='_blank' title='Twitter' rel='nofollow'></a></li>
<li><a class='google-p1' href='https://plus.google.com/b/username' target='_blank' title='Google Plus' rel='nofollow'></a></li>
<li><a class='rss1' href='http://feeds.feedburner.com/username' target='_blaank' title='RSS Feed' rel='nofollow'></a></li>
<li><a class='pinit1' href='http://www.pinterest.com/username' target='_blank' title='Pinterest' rel='nofollow'></a></li>
<li><a class='linkdin1' href='http://www.linkedin.com/in/username' target='_blank' title='Linkedin' rel='nofollow'></a></li>
</ul>
</div>
<!**my top bar space**>
<ul class="topnav" id="myTopnav">
<li>
</li>
<li class="icon">
</li>
</ul>
<div class="banner">
<img class="banner-image" src="img/banner.jpg" alt="Make Image responsive" >
</div>
<!** My nav bar space**>
<ul class="nav">
<li class="icon">
☰
</li>
<li> DIGITAL </li>
<li> ANALYSES </li>
<li> CRÉATIVITÉ </li>
<li> TECHNOLOGIE </li>
<li> ÉVÉNEMENT </li>
<li> EMPLOI </li>
<li> CONTACT </li>
</ul>
<div class="footer">Dzair Tic Tous droits réservés ©2017.</div>
</body>
.nav {
font-family: 'arial', serif;
margin-top: 0;
background-color: #1f5d86;
Color: #ffffff;
list-style: none; /* Na7i boutton ta3 la liste */
text-align: center;
opacity: 0.9;
}
.nav > li {
display: inline-block;
padding: 15px 20px;
font-size: auto ;
}
Just replace these 2 classes in css
Related
Not Working
This is my simple header of navigation and logo
<header>
<div class="logo" style="width: 11%;">
<img src="Images/logo.png" style="width: 100%;">
</div>
<nav>
<ul>
<li>
<a href="#" >HOME</a>
</li>
<li>
ABOUT US
</li>
<li>
SERVICES
</li>
<li>
CONTACT US
</li>
<li>
TESTIMONIALS
</li>
<li>
FAQ
</li>
<li>
CONTACT US
</li>
</ul>
</nav>
</header>
My CSS in which active class is not working while others are working well
li
{
display: inline-block;
font-size: 18px;
a
{
display: inline-block;
color:$secondary;
padding: 17px;
&:active
{
padding: 10px;
background : blue;
font-weight: bold;
}
}
}
Whether you use hover or focus it will work but active pseudo class is not in progress
can anyone help
Your confused between pseudo-classes and CSS classes what you need here is a CSS class to be set on the active list item and to do that you need to add some JS
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("li");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
li{
display: inline-block;
font-size: 18px;
a
{
display: inline-block;
color: gray;
padding: 17px;
}
}
.active{
padding: 10px;
background : blue;
font-weight: bold;
}
<header>
<div class="logo" style="width: 11%;">
<img src="Images/logo.png" style="width: 100%;">
</div>
<nav>
<ul id="myDIV">
<li class="li active">
<a href="#" >HOME</a>
</li>
<li class="li">
ABOUT US
</li>
<li class="li">
SERVICES
</li>
<li class="li">
CONTACT US
</li>
<li class="li">
TESTIMONIALS
</li>
<li class="li">
FAQ
</li>
<li class="li">
CONTACT US
</li>
</ul>
</nav>
</header>
I have a vertical navbar menu with 2 blocks.
First is nav with icons, second is text of menu.
They have a different background colors. How i can make one background color for two active nav blocks?
design of menu
<div class="menu__icons">
<ul class="menu__list">
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item" href="#">First</a></li>
<li><a class="menu__item" href="#">Second</a></li>
<li><a class="menu__item" href="#">Third</a></li>
<li><a class="menu__item" href="#">Fourth</a></li>
</ul>
</div>
</div>
https://jsfiddle.net/levan563/1g5ucmwq/2/
Well basically if you want to toggle .active and you don't want two separate markup of list.
Notice that font-awesome is for demonstration purposes only.
.menu__item {
width: 250px;
height: 50px;
text-align: left;
}
.menu__item.active {
background-color: #e9ebfd;
}
.menu__item.active .menu__icon {
background-color: #e9ebfd;
border-left: 4px solid #2c39ec;
}
.menu__item.active .menu__title {
background-color: #e9ebfd;
}
.menu__item a:hover {
text-decoration: none;
}
.menu__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #fafafa;
color: #2c39ec;
}
.menu__title {
display: inline-block;
padding-left: 20px;
color: #777777;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navigation-menu">
<ul class="menu__list list-unstyled">
<li class="menu__item active">
<a href="#">
<div class="menu__icon">
<i class="fa fa-tachometer-alt"></i>
</div>
<div class="menu__title">Main Dashboard</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-user"></i>
</div>
<div class="menu__title">Profile</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-bell"></i>
</div>
<div class="menu__title">Finances</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-calendar"></i>
</div>
<div class="menu__title">Titles</div>
</a>
</li>
</ul>
</nav>
Related Fiddle https://jsfiddle.net/mhrabiee/dojL9get/28/
As I understand take active class for both block's li and try to use font, svg icon or transparent background images instead of block images
.menu__list .active {
background-color: red;
}
<div class="menu__icons">
<ul class="menu__list">
<li><a class="menu__item active" href="#">
<img src="https://img.icons8.com/material/24/000000/tailoring-for-men.png">
</a></li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item active" href="#">First</a></li>
</ul>
</div>
Its doable using jQuery.
Assuming you have same number of list items in both blocks,
$(function(){
$('.menu__list li').on('click', function() {
var idx = $(this).index();
$('.menu__list li').removeClass('active');
$('.menu__list li:nth-child(' + idx + ')').addClass('active');
});
});
also add .active class in css and give needed style to li items also
.active{
/**your style**/
}
.active > a{
}
.active img{
}
Hello I am having a problem that when I make my top area non scroll able the area almost completely disappears.
Before Fixed Picture
html for header
<section id="header">
<div class="container">
<ul class="top-nav">
<li>
<a href="#" class="choose-language" data-toggle="popover" id="languageChooser" data-original-title="" title="">
English
<b class="caret"></b>
</a>
<div id="languageChooserContent" class="hidden">
<ul>
<li>
العربية
</li>
<li>
Azerbaijani
</li>
<li>
Català
</li>
<li>
中文
</li>
<li>
Hrvatski
</li>
<li>
Čeština
</li>
<li>
Dansk
</li>
<li>
Nederlands
</li>
<li>
English
</li>
<li>
Estonian
</li>
<li>
Persian
</li>
<li>
Français
</li>
<li>
Deutsch
</li>
<li>
עברית
</li>
<li>
Magyar
</li>
<li>
Italiano
</li>
<li>
Macedonian
</li>
<li>
Norwegian
</li>
<li>
Português
</li>
<li>
Português
</li>
<li>
Română
</li>
<li>
Русский
</li>
<li>
Español
</li>
<li>
Svenska
</li>
<li>
Türkçe
</li>
<li>
Українська
</li>
</ul>
</div>
</li>
<li>
Login
</li>
<li>
Register
</li>
<li class="primary-action">
<a href="/cart.php?a=view" class="btn">
View Cart
</a>
</li>
</ul>
<img src="/assets/img/logo.png" alt="WebKing Web Services">
</div>
</section>
html for navbar
Toggle navigation
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="primary-nav">
<ul class="nav navbar-nav">
<li menuitemname="Home" class="" id="Primary_Navbar-Home">
<a href="/index.php">
Home
</a>
</li>
<li menuitemname="Store" class="dropdown" id="Primary_Navbar-Store">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Store
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li menuitemname="Browse Products Services" id="Primary_Navbar-Store-Browse_Products_Services">
<a href="/cart.php">
Browse All
</a>
</li>
<li menuitemname="Shop Divider 1" class="nav-divider" id="Primary_Navbar-Store-Shop_Divider_1">
<a href="">
-----
</a>
</li>
<li menuitemname="Select Your Perfect Plan" id="Primary_Navbar-Store-Select_Your_Perfect_Plan">
<a href="/cart.php?gid=1">
Select Your Perfect Plan
</a>
</li>
<li menuitemname="symantec" id="Primary_Navbar-Store-symantec">
<a href="/index.php?rp=/store/ssl-certificates">
SSL Certificates
</a>
</li>
<li menuitemname="Shop Divider 2" class="nav-divider" id="Primary_Navbar-Store-Shop_Divider_2">
<a href="">
-----
</a>
</li>
<li menuitemname="Register a New Domain" id="Primary_Navbar-Store-Register_a_New_Domain">
<a href="/cart.php?a=add&domain=register">
Register a New Domain
</a>
</li>
<li menuitemname="Transfer a Domain to Us" id="Primary_Navbar-Store-Transfer_a_Domain_to_Us">
<a href="/cart.php?a=add&domain=transfer">
Transfer Domains to Us
</a>
</li>
</ul>
</li>
<li menuitemname="Announcements" class="" id="Primary_Navbar-Announcements">
<a href="/index.php?rp=/announcements">
Announcements
</a>
</li>
<li menuitemname="Knowledgebase" class="" id="Primary_Navbar-Knowledgebase">
<a href="/index.php?rp=/knowledgebase">
Knowledgebase
</a>
</li>
<li menuitemname="Network Status" class="" id="Primary_Navbar-Network_Status">
<a href="/serverstatus.php">
Network Status
</a>
</li>
<li menuitemname="Contact Us" class="" id="Primary_Navbar-Contact_Us">
<a href="/contact.php">
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li menuitemname="Account" class="dropdown" id="Secondary_Navbar-Account">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Account
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li menuitemname="Login" id="Secondary_Navbar-Account-Login">
<a href="/clientarea.php">
Login
</a>
</li>
<li menuitemname="Register" id="Secondary_Navbar-Account-Register">
<a href="/register.php">
Register
</a>
</li>
<li menuitemname="Divider" class="nav-divider" id="Secondary_Navbar-Account-Divider">
<a href="">
-----
</a>
</li>
<li menuitemname="Forgot Password?" id="Secondary_Navbar-Account-Forgot_Password?">
<a href="/pwreset.php">
Forgot Password?
</a>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</section>
Code:
section#header {
margin: 0;
padding: 10px 0;
background-color: #fff;
border-radius: 5px 5px 0 0;
}
Now when I add the position fixed and try to make it uncontrollable the white part and logo area no longer scroll however before i even begin to scroll my menu bar is pushed up and out of position.
Picture now fixed you can see the menu bar has changed its location. Here is the new code
section#header {
position: fixed;
width: 100%;
margin: 0;
padding: 10px 0;
background-color: #fff;
border-radius: 5px 5px 0 0;
}
This is not a z-index issue as this is happening before i even scroll down the page.
I have been stuck for days I would really be grateful for any help.
UPDATE: Okay I have the fixed menu where it is supposed to be but now I am having this issue with every page and I have no idea why every div and section has moved up as if the header doesnt exist. mind you this is before any scrolling begin. Please feel free to visit webking.com and navigate to any page to see what I mean.
As you can see a huge mess
Thanks
So here is my last corrections :
1st step fix the header :
section#header {
position: fixed; /* We want the header fixed at top */
z-index: 1000; /* We want header over other elements when scrolling */
/* margin: -5px 0 0 0; */ /* Remove seems not needed */
height: 60px; /* We should fix the header height */
width: 100%; /* header will take all available width */
background-color: #fff;
border-radius: 5px 5px 0 0;
}
2nd step fix the menu :
section#main-menu {
/* margin: 60px auto 0; */ /* It is not the place for the marin-top. We don't need this */
position: fixed; /* We want the menu fixed at top */
width: 100%;
background-color: #006687;
top: 60px; /* We want menu above the header so we shift the menu of the height of the header */
z-index: 1000; /* We want menu over other elements when scrolling */
}
3rd step correction of the content :
Here, I don't understand why (maybe need more investigations) but
the browser take the margin-top of the section#main-body and
apply it to the header. It's is not what we want and it's here we
will fix it with this :
We will add and apply the margin-top trick to the
.container inside the section#main-body
like this :
section#main-body .container {
margin-top: 100px; /* header : 60 + menu : 40 */
}
I am working on a responsive footer and I was able to get everything working. The layout is where there is a small issue. I am not able to get the bottom border after each li field and also not able to get the icon at the end. This is what I have done so far. Kindly let me know what I am missing.
#media all and (max-width: 979px) {
.brand-logos{
margin: 0 auto !important;
padding: 10px !important;
}
footer nav ul{
display:block !important;
margin: 0 auto !important;
}
footer nav ul li{
display:inline-block;
margin: 0 auto !important;
padding: 0 !important;
}
footer nav ul li img{
margin: 20px auto !important;
width: 70% !important;
display: block !important;
}
footer .footer-navigation .container-inline-css{
width: 100% !important;
padding:10px !important;
margin:0 !important;
border-bottom: 1px solid #77777A !important;
}
footer .footer-navigation .container-inline-css span{
margin: 0 !important;
padding: 0px !important;
cursor: pointer !important;
}
footer .footer-navigation div.container-inline-css ul{
max-height: 0 !important;
overflow: hidden !important;
padding: 0 20px !important;
}
footer .footer-navigation div.container-inline-css.active ul{
max-height: 10000px !important;
}
}
<div class="footer-navigation">
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>CONTACT INFO</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="null" target="_blank">
<span class="icon-bg icon-phone"> </span>Call 1-800-STERLING</a>
</li>
<li><a href="/contact-us" target="_self">
<span class="icon-bg icon-contact"></span> Contact Us</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>OUR COMPANY</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="http://www.annsacks.com/" target="_blank">
About Us</a>
</li>
<li><a href="http://www.kallista.com/home.kls" target="_blank">
E-Newsletter Sign Up</a>
</li>
<li><a href="http://www.robern.com/home.rbn" target="_blank">
Careers</a>
</li>
<li><a href="/press-releases" target="_self">
Press Room</a>
</li>
<li><a href="http://www.kohler.com/corporate/index.html" target="_blank">
Kohler Co.</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>RESOURCES</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="/litrature" target="_self">
Literature</a>
</li>
<li><a href="https://www.youtube.com/channel/UCMMnMReFTMuI9bpoctNGPkw/videos" target="_blank">
Merchandise</a>
</li>
<li><a href="null" target="_blank">
FAQs</a>
</li>
<li><a href="null" target="_blank">
Glossary</a>
</li>
<li><a href="null" target="_blank">
Tech Documents</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>CUSTOMER CARE</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="/cad-symbols" target="_self">
Track Your Order</a>
</li>
<li><a href="http://www.inspiracionkohler.com/" target="_blank">
Care & Cleaning</a>
</li>
<li><a href="null" target="_blank">
Warranties</a>
</li>
<li><a href="null" target="_blank">
Videos</a>
</li>
<li><a href="null" target="_blank">
Product Registration</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>SOCIAL</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="https://www.facebook.com/kohlermexico" target="_blank">
<span class="icon-bg icon-social-facebook"></span>Facebook</a>
</li>
<li><a href="https://www.instagram.com/kohlerco/?hl=en" target="_blank">
<span class="icon-bg icon-social-instagram"></span>Instagram</a>
</li>
<li><a href="https://www.youtube.com/user/kohler" target="_blank">
<span class="icon-bg icon-social-pinterest"></span>Pinterest</a>
</li>
<li><a href="null" target="_blank">
<span class="icon-bg icon-social-youtube "></span>YouTube</a>
</li>
<li><a href="null" target="_blank">
<span class="icon-bg icon-social-houzz"></span> Houzz</a>
</li>
</ul>
</div>
</div>
I have all the functionality in place, expect for the bottom border of the li elements and also the arrow icon at the end. Any help is appreciated.
1) You use the footer tag as your CSS selector, but there is no footer tag in your HTML code.
2) You haven't set any border to your li tags. You can accomplish that by adding to your css
.koh-nav-section-items li {
border-bottom: 1px solid #fff;
}
you should be able to add border to the bottom of each li element. If you want to exclude the last element you can add
.koh-nav-section-items:last-of-type {
border-bottom: none;
}
a tip: try to avoid using !important
note: If you can provide a codepen link to your app, it would be much easier
How can I add vertical divider after the li element on the main menu?
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> <span class="sr-only">(current)</span></li>
<li><a href="#" > نبذه عنا </a></li>
<li> اكادمية بوذيب للفروسيه </li>
<li> اسطابلات بوذيب </li>
<li> المركز الاعلامي </li>
<li> اتصل بنا </li>
<li> اكثر <i class="fa fa-bars"></i> </li>
<li> </li>
</ul>
This is the site I want to fix: the site
And this is the image I want the main menu to be like: the image
Can any one help me?
Although you could try this by giving border to sides, but nav items have more height than vertical line that you want to give, then you can try <pseudo:before> to achive this
.navbar-default .navbar-nav>li>a:after {
content: '';
display: inline-block;
position: absolute;
width: 1px;
background: #fff;
height: 30px;
right: 0;
top: calc(50% - 15px);
}
.navbar-default .navbar-nav>li:last-child>a:after,
.navbar-default .navbar-nav>li:first-child>a:after{
display:none;
}
Try this one
ul li{
float:left;
list-style:none;
padding:0 8px;
border-right:2px solid gray;
}
ul li:last-child{
border:none;
}
a{
text-decoration:none;
}
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> <span class="sr-only">(current)</span></li>
<li><a href="#" > نبذه عنا </a></li>
<li> اكادمية بوذيب للفروسيه </li>
<li> اسطابلات بوذيب </li>
<li> المركز الاعلامي </li>
<li> اتصل بنا </li>
<li> اكثر <i class="fa fa-bars"></i> </li>
</ul>