I'm trying to use the wordpress custom menu to allow users to link their social media sites easily. So far I set up a wordpress menu "Social Icons" in my functions.php theme file and am using the custom menu widget to place it on the site. This is the html wordpress generated for the menu and widget
<div class="menu-social-icons-container">
<ul id="menu-social-icons" class="menu">
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73">Facebook</li>
<li id="menu-item-74" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-74">Twitter</li>
<li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-76">Instagram</li>
<li id="menu-item-77" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-77">Youtube</li>
</ul>
</div>
I'm assuming the id "menu-social-icons" is due to either the theme location or menu name I created so IF the id is based upon that I could use this method to allow users to link up their social media icons. Will the id "menu-social-icons" be the same for any user that uses this theme, or is it a generated id like "menu-item-73" in the li.
If it will be the same, I am trying to style the nth child a elements to backgrounds of the icons but I'm confused as to which selectors to use in css because for example if I use
ul#menu-social-icons li a:link:nth-child(1){
background-img:url(images/facebook.png);
}
ul#menu-social-icons li a:link:nth-child(2){
background-img:url(images/twitter.png);
}
ect
I don't get anything
What selectors do I need to use to style achieve this?
consider to this example http://jsfiddle.net/jogesh_pi/d85Ae/
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
</ul>
CSS
ul li:nth-child(1) a{ color: #ff0000; }
ul li:nth-child(2) a{ color: green; }
ul li:nth-child(3) a{ color: #ff9900; }
Note: Make sure about the path of images that you want to implement on the menus
Related
I'm having trouble figuring out how to solve this CSS problem.
The code is create by a WordPress plugin so have limited possibilities when it comes to naming the classes and so on.
This is the code:
<li class="page_item page-item-365 page_item_has_children current_page_item has_children”>
<a href="http://www.xxx.dk/side1/side2/“>Side 2</a>
<ul class="children">
<li class="page_item page-item-556”>
<a href="http://www.xxx.dk/“>punkt 1</a>
</li>
<li class="page_item page-item-556”>
<a href="http://www.xxx.dk/“>punkt 1</a>
</li>
<li class="page_item page-item-556”>
<a href="http://www.xxx.dk/“>punkt 1</a>
</li>
</ul>
</li>
The problem is that all of my links become bold when I'm styling them. I only want it to happen on the current page (selected page). I have tried with the following CSS code, but without luck:
li.current_page_item a:first-child {
font-weight: bold;
}
I believe I found a solution - dont know if I understand it but it works ;)
.current_page_item > a {
font-weight: bold;
}
In your case, every a is the first child of a li.
What you are searching for is:
li.current_page_item a {
Furthermore all of your menu entries link to the same id. So I guess every of it get the "current" class, if one is selected. Add some other links to the menu and you will see, that it will work!
You were close to the solution ;-)
Have a look here, is this what you looking for?
li.current_page_item > a:first-child {
font-weight: bold;
}
Example on Codepen:
http://codepen.io/funkysoul/pen/XNVdbE
please recheck your code. refer the screenshot.
First question at StackOverflow.
I've been busting my head to figure this one out.
My main menu options (# gabrielpinto.pt) are made of text and icon (FontAwesome).
I want to change the hover color of the icon WHEN I'm hovering the written link.
Here's one of the menu option's markup:
<nav id="site-navigation" class="main-navigation col-md-8" role="navigation">
<div class="menu-menu-principal-container">
<ul id="menu-menu-principal" class="menu nav-menu">
<li id="menu-item-24" class="fa-street-view menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-24">
Gabriel Pinto
</li>
</ul>
</div>
</nav>
I'm just a beginner in HTML and CSS, and I've tried a lot of different rules but without any positive result.
Example:
a.fa-street-view:hover li::before {
color: #bc4676; }
What CSS rule will make it work?
This would work:
.fa-street-view:hover {
color: #bc4676;
}
Here is an example:
http://jsfiddle.net/gtr45hk7/
Edit
I added the .fa class to .fa-street-view in your html to make the example work.
Edit 2
I just looked at your site. Try this:
.main-navigation li:hover::before {
color: #bc4676;
}
If you want to match the link transitions, this might do the trick:
.main-navigation li::before {
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
I'm using Wordpress and i'm trying to have my navigation display a color for that active navigation link IE a blue link on home when home page selected and a red link on services page when services page clicked.
I'm trying to do this using CSS. The navigation code is below:
<div id="menu-secondary" class="site-navigation menu-container" role="navigation">
<span class="menu-toggle">Menu</span>
<div class="wrap">
<div class="menu">
<ul id="menu-secondary-items" class="nav-menu sf-js-enabled">
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21">
Home
</li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20">
Welcome
</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
Services
</li>
Here is CSS that makes each current active link be yellow.
#menu-secondary li.current-menu-item a {
color: #FFCC33;
}
but i want each page to show a different color.
I'm thinking of something like this, but its not working
#menu-secondary li. menu-item-18{
color: #0F0;
}
You can target a div with an ID and Class active at the same time like so:
#menu-secondary #menu-item-18.current-menu-item a{
color: #0F0;
}
As a sidenote, avoid using the li at the start when using an ID , like:
li.#menu-item-18.current-menu-item
as you're just slowing things down (an ID is already unique so doesn't need the li specified).
I have an html menu listing that look like this:
<ul id="navlist" class="clearfix">
<li class="home"></li>
<li class="xo">About Us</li>
<li class="xoxo">People</li>
<li class="xoxoxo">Business</li>
<li class="xo">News</li>
<li class="xoxo">Careers</li>
<li class="xoxoxo">Gallery</li>
<li class="xi">Contact Us</li>
</ul>
My challenge is ensuring the CMSListMenu apply the different classes to each li.
The li could styled each by using Edit > Document Properties > Navigation tab provided in portal engine.
It exposed the css styling of each page li. You can set the link, mouseover and current page classes.
I've created a site where I built a 3-level drop-down menu. Everything is working great in every browser I've tested in so far except for IE8. In IE8, when you hover over the highest level buttons, the drop-down menus appear. When you mouse over any secondary pages that have children under then, the menus SHOULD appear to the right of the parent page, and it does this in Chrome, Firefox, Safari, and IE9+.
I was hoping someone could take a look at the site and let me know if you've got any ideas.
http://sightlines.quantumdynamix.net/
Hover over "Who We Are" and "Our Team" should have a tertiary level menu, but it does not display in IE8.
Here is the CSS that displays the tertiary level menu:
#mainNavContainer .sub-menu li:hover > div > .sub-menu {
display: block;
}
And here is the menu code (trimmed down since you wouldn't need the entire menu for this). Sorry for the large amount of classes, but it is a Wordpress menu.
<div id="mainNavContainer">
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-first has_children menu-item-72">
Who We Are
<div class="sub-menu-container">
<ul class="sub-menu">
<li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73">
Our Story
</li>
<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page has_children menu-item-74">
Our Team
<div class="sub-menu-container">
<ul class="sub-menu">
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
Executive Team
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
Leadership Team
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Here is a screenshot of what is happening. The blue box is generated from the Dev Tools in IE8, indicating that the browser does know where the sub-menu should be, but it does not display when I hover over Our Team.
This CSS was line was causing the error:
filter:progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color=#444444);
When I viewed the site in IE8's dev tools, that line read as follows:
filter:progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color=#444444); BORDER-LEFT: #d5d5d5 1px solid
Now that I've made changes to this, I cannot get the full list to come back, but originally many other styles besides the BORDER-LEFT appears in the filter line.
I'm unsure what in the filter was causing the error, but we decided to nix the drop shadow for ie8 or older users, and so removing the filter line fixed everything.
I cannot use Spoon.net — it is a paid service — but try this:
#mainNavContainer .sub-menu li:hover > div > .sub-menu:hover {
display: block;
}
And please, try to give a picture of your problem.