I am trying to use two Twitter Bootstrap navs on the same page. I have written some css to style them. Problem is, I want the css to apply to just one of the navs. I tried to use css ids to distinguish the two navs, but am having trouble getting the selectors right. Can anyone help?
Here's a simplified version of what I'm trying to do: http://jsfiddle.net/XVReX/
HTML:
<div id="something" class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li id="selectEventStep"><a>Select Event</a>
</li>
<li id="selectPriceStep"><a>Select Price</a>
</li>
<li id="confirmSwapStep"><a>Confirm Swap</a>
</li>
</ul>
</div>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li id="selectEventStep"><a>Select Event</a>
</li>
<li id="selectPriceStep"><a>Select Price</a>
</li>
<li id="confirmSwapStep"><a>Confirm Swap</a>
</li>
</ul>
</div>
</div>
</div>
CSS:
#something.navbar #something.navbar-inner {
padding: 0;
background-image: -webkit-linear-gradient(top, #E5665D, #C4564F);
}
#something.navbar #something.nav li a {
font-weight: bold;
text-align: center;
color: #FFE2E0;
text-shadow: 0 1px 0 #000;
;
}
#something.navbar #something.nav li a:hover {
color: #fff;
}
Thanks!
The selectors are more complicated than necessary and the syntax is incorrect - you can override bootstrap.css by instead using:
#something .navbar-inner { }
#something .nav li a{ }
#something .nav li a:hover { }
jsFiddle
I rewrote the entire style sheet to apply the style only on those elements with a class name .bootstrap using sass compiler and regular expression which looks like this
audio.bootstrap:not([controls]) {
display: none;
}
html.bootstrap {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a.bootstrap:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
I haven't checked everything but I think it works alright.
http://jsfiddle.net/Lc5h6/
Related
It seemed to me a job for a minute, when a friend asked me to fix this. After the update of the mesmerize theme, the footer was set to default and she wanted it to be changed again. Everything went fine except: the a:hover of the footer didn't work. I couldn't fix it eighter.
I changed the CSS to:
/* Footer Link-Farbe*/
.footer a {
color: var(--color-primary);
}
/* Footer Hover-Farbe*/
.footer a:hover {
color: var(--color-primary-light);
}
and also tried:
/* Footer Link-Farbe*/
.footer a:link, .footer a:active, .footer a:visited {
color: var(--color-primary);
}
/* Footer Hover-Farbe*/
.footer a:hover {
color: var(--color-primary-light);
}
In the firefox developer tool i can see the link-color is working:
screenshot of developer-tool
But the :hover is not there.
But if I add the hover-rule to the developer-tool it works:
screenshot of developer-tool with css edited
I'm really lost. I hope somebody can help.
The domain ist: www.ubuntu-ubuntu.at
Have you tried using a more specific selector for the hover style?
Sorry the domain you provided, didn't work so i don't know how the markup looks, but something like this:
.footer .horizontal_footer_menu ul li a:hover {
color: var(--color-primary-light);
}
Or try to use !important just to get things done.(It's not really recommended)
.footer a:hover {
color: var(--color-primary-light) !important;
}
You have do declare variable in ":root" after you can use or chnage in your css classs.
in word press the backend option allow you to change footer link color using "var".
you have to change option in wordpress backend settings.
OR
You can use ":root" for overrite default settings.
:root {
--color-primary: #3f51b5;
--color-primary-light: #1e90ff;
}
.footer .horizontal_footer_menu ul li {
display: inline-block;
}
.footer .horizontal_footer_menu ul li a {
text-decoration: none;
padding: 10px;
}
/* Footer Link-Farbe*/
.footer a {
color: var(--color-primary);
}
/* Footer Hover-Farbe*/
.footer a:hover {
color: var(--color-primary-light);
}
<div class="footer">
<div class="horizontal_footer_menu">
<ul>
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
</div>
Try Using this HTML code for wordpress footer hover. I have tried this in my E-commerce wordpress store and it worked fine.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#footer{background:#fff;position:relative}
.footerLogo { font-size: 1.8em; font-weight: 600; color: #333; margin-bottom: 22px; display: block; }
#footer::before{content:"";background:linear-gradient(to right,#fff 0,#535df1 50%,#fff 100%);height:5px;width:100%;position:absolute}
.footer-wrapper{padding:50px 0;float:left;width:100%}
img.footer-logo{margin-bottom:20px}
ul.social-icons{margin:0; padding: 0;}
ul.social-icons li{background:#fff;width:30px;height:30px;border:1px solid #f1f2f2;border-radius:4px;margin:3px;text-align:center; display: inline-block;}
ul.social-icons li a{color:#6d6e71;font-size:15px;line-height:30px}
ul.social-icons li a:hover{color:#27aae1;transition:all 1s}
ul.footer-links { padding: 0; list-style-type: none; position: relative;}
ul.footer-links li{line-height:25px; padding-left: 15px; }
ul.footer-links li:before { position: absolute; content: 'f105'; font-family: FontAwesome; left: 0;}
ul.footer-links li a{color:#6d6e71}
ul.footer-links li a:hover{color:#27aae1; text-decoration: none;}
ul.contact{margin:0;padding:0}
ul.contact li{list-style:none;padding:15px 0;border-bottom:1px solid #f1f2f2;font-size:13px;font-weight:600;line-height:15px;}
ul.contact li i{font-size:18px;margin-right:20px;color:#27aae1}
.copyright{background:#231f20;text-align:center;color:#fff;padding:12px 0 4px}
</style>
<footer id="footer" class="bg-light mt-5">
<div class="container">
<div class="footer-wrapper">
<div class="row">
<div class="col-md-3 col-sm-3">
Company
<ul class="social-icons">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-xing"></i></li>
<li><i class="fa fa-pinterest"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
<div class="col-md-2 col-sm-2">
<h5>For individuals</h5>
<ul class="footer-links">
<li>Signup</li>
<li>login</li>
<li>Explore</li>
<li>Finder app</li>
<li>Features</li>
<li>Language settings</li>
</ul>
</div>
<div class="col-md-2 col-sm-2">
<h5>For businesses</h5>
<ul class="footer-links">
<li>Business signup</li>
<li>Business login</li>
<li>Benefits</li>
<li>Resources</li>
<li>Advertise</li>
<li>Setup</li>
</ul>
</div>
<div class="col-md-2 col-sm-2">
<h5>About</h5>
<ul class="footer-links">
<li>About us</li>
<li>Contact us</li>
<li>Privacy Policy</li>
<li>Terms</li>
<li>Help</li>
</ul>
</div>
<div class="col-md-3 col-sm-3">
<h5>Contact Us</h5>
<ul class="contact">
<li><i class="fa fa-phone"></i>+1 (234) 123 1234</li>
<li><i class="fa fa-envelope-o"></i>info#company.com</li>
<li><i class="fa fa-home"></i>123 Any street second floor, INDIA</li>
</ul>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="copyright">
<p>Company © 2019. All rights reserved</p>
</div>
</footer>
I took this code from https://webdesignerwall.com/wdw-snippet/footer-with-hover-effects Aesthetic outfits
You can learn more about this issue in another thread I found:
https://wordpress.org/support/topic/footer-hover-link-wont-change/
I have been seriously messing with this one thing for over an hour now. Basically I have a navigation bar, there is an icon on the far left, and the links are aligning to the bottom of the image.
I have tried messing with padding, margins, line height, vertical-align and everything else I could think of. I also tried having the image inside and before the ul. I need the ul items (will be links) to be vertically aligned to the center of the icon.
I have put all the code into one file that I will copy here. Also, when you post please explain why a solution will work, not just post code. The other posts I searched for about this before I posted here didn't explain anything, just included code that didn't help when I tried it. Unfortunately, because I have no idea what the solution is or what it relates to I am including all of the code.
body {
margin: 0;
/*background-color: #10f009;*/
font-size: 62.5%;
font-family: sans-serif;
}
img {
margin: 0 0 0 0;
max-width: 100%;
height: 50%;
}
.smallSection {
margin: 100px;
}
.paragraph {
font-size: 2em;
max-width: 500px;
}
.title {
font-size: 2.4em;
}
.list {
list-style: solid inside url("");
font-size: 2em;
}
.nav-link {
list-style-type: none;
display: inline-block;
text-align: center;
font-size: 2em;
width: 200px;
border: 1px solid red;
}
.nav-icon {
display: inline-block;
border: 1px solid red;
}
.largeSection {} #section1 {
background-image: url("../img/placeholder.jpg")
}
#nav {
border: 1px solid red;
margin: 0;
padding: 0;
align: top;
height: 100px;
line-height: 1;
}
/*temporary*/
div {
border: 1px solid red;
}
<!-- Dawn Little -->
<div id="section1" class="largeSection">
<!-- Navigation -->
<div>
<ul id="nav">
<div style="width:70px;height:70px;border: 1px solid red;display: inline-block;">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<!-- <img src="img/herbfalife-icon.png" width="70px" height="70px" class="nav-icon"> -->
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do</li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
</div>
<div class="smallSection">
<p class="paragraph">
<span class="title">Client Name<br /></span> Hi, I'm a wife, mother, and Personal Wellness Coach with Herbalife Nutrition. My super power - I change lives.
</p>
</div>
</div>
<!-- What I do -->
<div id="section2" class="largeSection">
<div class="smallSection">
<p class="paragraph">
<span class="title">What I do</span>
<ul class="list">
<li>Wellness Evaluations</li>
<li>Nutrition Coaching</li>
<li>Impact Lifestyle</li>
<li>Get Results</li>
<li>Coach Coaches</li>
</ul>
</p>
</div>
</div>
<!-- 3-day trial -->
<div id="section3" class="largeSection">
<div class="smallSection">
<p class="title">
Try Our 3-Day Trial
</p>
<p class="title">
What you get:
</p>
<ul class="list">
<li>Personal Wellness Coach</li>
<li>Wellness Evaluation</li>
<li>Meal Plan</li>
<li>Daily Support</li>
<li>Plan of Action</li>
<li>6 Meals</li>
<li>Metabolism Booster</li>
</ul>
</div>
</div>
<!-- Challenges -->
<div id="section4" class="largeSection">
<div class="smallSection">
<p class="title">
Join a Weight Loss Challenge
</p>
<p class="title">What you get:</p>
<ul class="list">
<li>Personal Wellness Evaluation</li>
<li>Personalized Program</li>
<li>Nutrition Classes</li>
<li>ommunity of Support</li>
<li>Accountability</li>
<li>Opportunity to Win Cash & Prizes</li>
</ul>
</div>
</div>
<!-- Become a coach -->
<div id="section5" class="largeSection">
<div class="smallSection">
<p class="title">
Become a Coach
</p>
<p class="title">
What you get:
</p>
<ul class="list">
<li>Opportunity to Change Lives</li>
<li>Opportunity for Personal & Financial Growth</li>
<li>Training</li>
<li>Potential to Change Lives in Over 90 Countries</li>
<li>Be Part of a Team</li>
<li>Get in the Best Shape You've Ever Been</li>
</ul>
</div>
</div>
This way that you are coding is a bit tricky to align.I will rewrite your code. However, I recommend you to use a CSS framework like bootstrap or zurb.
Firstly, you need to rewrite HTML part like
<!-- Navigation -->
<div class="header clearfix">
<div class="logo">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<div class="nagivation">
<ul id="nav">
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do </li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
</div>
</div>
I have added header and nagivation
then add these lines to your css to
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
.header{
min-height:70px;
clear:both
}
.logo{
width:20%;
float:left;
}
.nagivation{
width:80%;
float:right;
}
you need to remove #nav also in your CSS code.
based on your needs, you can change this class
.nagivation #nav{
// add needed adjustment
}
you can have an access to all codes here https://jsfiddle.net/mhadaily/7f152z3r/
The easiest way to accomplish what you want is to simply float the icon as seen in the css below and in this pen.
#nav {
border: 1px solid red;
height:100px;
line-height:1;
display:inline-block;
}
.nav-icon {
display: inline-block;
border: 1px solid red;
float:left;
}
Floats force other elements to flow around the floated element. You just want to be wary of floats because they wreak havoc on your layout if you're not vigilant (they collapse their parent containers). You can read all about it here.
I am not a UI expert. But By looking at the following tag I can asked you few question to understand? Because You are writing non-li tags within ul. Try ti wrap your code with li tag.
Just go to w3cshool link.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu
http://www.w3schools.com/html/html_lists.asp
<ul id="nav">
<div style="width:70px;height:70px;border: 1px solid red;display: inline-block;">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<!-- <img src="img/herbfalife-icon.png" width="70px" height="70px" class="nav-icon"> -->
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do </li>
What about simply moving the li elements up a little bit?
.nav-link {
position: relative;
bottom: 20px;
}
First off, the only elements that should be inside a <ul> are <li>. That <div> (or link or whatever it is in reality) may cause you grief.
The real problem, however, is that you're using the wrong CSS property on the wrong element. You want vertical-align (not "align"), and it should be applied to the list-items (not the container).
Try this:
<ul>
<li class="nav-link"><!-- img here --></li>
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do</li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
with
.nav-link { vertical-align: middle; }
A particular nested list, with parent div id and list items with different class... I can't make it to assign correctly background colors.
For example:
<div id="sidebar" class="widget-area">
<div class="theiaStickySidebar">
<aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu">
<ul class="parent-sidebar-menu">
<li class="current_page_ancestor">
About Us
<ul class="child-sidebar-menu">
<li class="page_item">
Welcome
</li>
<li class="page_item current_page_item">
Mission and philosophy
</li>
</ul>
</li>
</ul>
</aside>
</div>
What CSS code would you use to change background colour of each li/a item belonging to class current_page_ancestor, page_item and current_page_item(each one should have different colors)
For first a you can use > or direct-child selector and for others you can just select with parentClass->a
.current_page_ancestor > a {
color: black;
}
.page_item a {
color: green;
}
.page_item.current_page_item a {
color: red;
}
<div id="sidebar" class="widget-area">
<div class="theiaStickySidebar">
<aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu">
<ul class="parent-sidebar-menu">
<li class="current_page_ancestor">
About Us
<ul class="child-sidebar-menu">
<li class="page_item">
Welcome
</li>
<li class="page_item current_page_item">
Mission and philosophy
</li>
</ul>
</li>
</ul>
</aside>
</div>
ul {
/* reset lists */
list-style: none;
padding: 0;
margin: 0;
}
ul li a {
text-decoration: none;
}
/* specific styles */
.page_item a {
display: block;
padding: 10px 20px;
border-bottom: 1px solid white;
color: white;
background-color: #333;
}
.page_item a:hover,
.page_item.current_page_item a{
background-color: #666;
}
.parent-sidebar-menu {
width: 200px;
}
.current_page_ancestor > a {
display: block;
padding: 10px 20px;
color: green;
background-color: #fff;
text-align: right;
}
.current_page_ancestor > a:before {
content: "Back to >> ";
font-size: 14px;
color: #000;
margin-right: 10px;
}
<div id="sidebar" class="widget-area">
<div class="theiaStickySidebar">
<aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu">
<ul class="parent-sidebar-menu">
<li class="current_page_ancestor">
About Us
<ul class="child-sidebar-menu">
<li class="page_item">
Welcome
</li>
<li class="page_item current_page_item">
Mission and philosophy
</li>
</ul>
</li>
</ul>
</aside>
</div>
</div> <!-- #sidebar -->
This is slightly different in that instead of using each class to do something different I am using similar things to do the same thing and changing based on state change. The ancestor page is treaded differently than the child sidebar menu. Hope this helps.
When trying to add an box with content inside it on a menu on a hover "drop down menu", it does something like this:
(source: gyazo.com)
I want the drop down to popup when I hover on the categories menu item.
This is the code I used for it:
<div class="secondheader">
<div class="container">
<div class="span12">
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories </li>
<li>Buy</li>
<li>Sell</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
</ul>
</div>
</div>
</div>
</div>
The CSS:
.secondheader {
background-image: url("../img/second.png");
width: 100%;
height: 66px;
border-bottom: solid 6px #f0e8ce;
}
.nav6 {
list-style: none;
font-family: 'Dosis', sans-serif;
float: left
font-size: 20px;
margin-top: 13px;
margin-left: -35px;
}
.nav6 li {
display: inline;
margin: 0px;
font-size: 18px;
font-family: 'Dosis', sans-serif;
float: left;
margin-top: 10px;
}
.nav6 a {
color: #7d7253;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
.nav6 a:hover {
background-image: url("../img/hoverbg.png");
color: #53410f;
text-decoration: none;
}
I've tried using tutorials but I don't really understand on how to make the same thing for my layout I mean it has different ways and classes.
Do you want something like http://jsfiddle.net/b76Qc/?
Edit:
In your case the submenu is horizontal because you use descendant selectors instead of child selectors:
replace .nav6 li with .nav6>li and .nav6 li ul with .nav6>li>ul
See my jsfiddle if you want the complete code.
Edit 2:
If you want each element to have a different background,
<li class="dropdown1">Categories
<ul>
<li style="background:red">Buy</li>
<li style="background:blue">Sell</li>
<li style="background:green">Forums</li>
...
</ul>
</li>
But can you provide a link to your site instead of images? The square shown in http://gyazo.com/35835f003d0d8b776248196632cc1d4a.png is weird, but I can't know what's happening just with images...
Edit 3:
You have to change
.nav6 a {
color: #7D7253;
padding: 20px;
}
into
.nav6>li>a {
padding: 20px;
}
.nav6 a {
color: #7D7253;
}
And
.nav6 a:hover {
background-image: url("../img/hoverbg.png");
color: #53410F;
text-decoration: none;
}
into
.nav6 a:hover {
color: #53410F;
text-decoration: none;
}
.nav6 > li > a:hover {
background-image: url("../img/hoverbg.png");
}
Edit 4:
Sorry I didn't explain why I was telling you to use selectors with >, I thought you knew it.
Your html is like this:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
</ul>
</li>
</ul>
If you use .nav6 a, the style will be applied to all <a> inside .nav6. That's a descendant selector.
Then, this will be applied both to menu's links and submenu's links:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
...
</ul>
</li>
</ul>
But if you use a child selector like .nav6>li>a, the style is applied only to the links which are childs of a <li> which is a child of .nav6 (only menu's links). This way we can set which styles we want to apply to all links and which to menu's links:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
...
</ul>
</li>
</ul>
Edit 5:
To fix the problem with backgrounds,
change
.nav6 a:hover {
color: #53410F;
text-decoration: none;
}
to
.nav6>li:hover>a, .nav6 .dropdown1 li:hover>a {
color: #53410F;
text-decoration: none;
}
and
.nav6 > li > a:hover
background-image: url("../img/hoverbg.png");
}
to
.nav6>li:hover>a {
background-image: url("../img/hoverbg.png");
}
To show you how little code is actualy required to make this work i set up a small example here: http://jsfiddle.net/fS5WV/
I put the explanations in the css.
The key lies in nesting the menu's properly, and giving the submenus a position absolute to prevent them from pushing the content down.
I hope it makes sense. Feel free to ask if you need further explanation.
i have been trying to have a drop down menu opon mouseover of the "profile" image button.
by using only css, this is what i achieve.
i also added text decoration to none but the underline still exist.
I have also tried using javascript but it doesnt work out for me.
Would any1 help enhancing this?
my html code:
<td class="header_button ">
<div id="menu">
<ul id="Ul1">
<li >
<asp:ImageButton runat="server"
ImageUrl="../img/Button/Profile.png" CssClass="profile_dropdown"
onclick="btnMyProfile_Click" />
</li>
<li class="item" >
Edit Profile
</li>
<li class="item">
My Follow
</li>
<li class="item">
My Uploads
</li>
<li class="item">
My Child Profile
</li>
</ul>
</div>
<div style="clear:both"></div>
</td>
my css code:
.profile_dropdown
{
height:75px;
weight:75px;
position:static;
}
#menu ul .item
{
display: none;
text-decoration: none;
background: #222222 85% 55% no-repeat;
font-family: 'Century Gothic';
font-size: large;
font-weight: bold;
color: #9FC54E;
white-space: nowrap;
}
#menu ul:hover .item{display:block;}
#menu{margin-top:-22px;position:fixed}
You should add
#menu li a {
text-decoration:none
}