I want to give separation between the list of menus in the site.
How to display horizontal lines between each menu items in this site
I want something like this :
We used the below code in menu.css
.em-catalog-navigation li { border-bottom: 1px solid #cecece; }
Strange thing is that it didn't work for me.
Let me know if you need any clarifications.
There was already a style for the parent li [BOY TOYS] so have used that to target the items you wanted
.em_nav .menu-item-hbox .menu-container .menu-item-text.menu-item-depth-3 > ul > li {
border-bottom: 1px solid #cecece;
}
Related
I'm trying to get the active page link on this Shopify store to have a top white border. Tried all sorts of things and nothing is working. I would just think I need
#main-header .dropdown.menu > li > a:active {
border-top: 2px solid #FFF;
transition: none;
}
Tried a:focus too but no luck.
try
#primary-menu> li.menu__active a {
border-top: 2px solid #FFF;
transition: none;
}
a:active is the state of the link after being clicked until the new page is loaded, which is usually a very short time, often even invisible. If you click and hold on a link in your page, you see the applied border-top appearing
If however by "active link" you mean the link of the page which you are currently on, that's not a:active, but the .menu__active class which is added via JS by the website to the li parent of the menu link (not automatically - there has to be a script that does that, which a lot of frameworks and themes/templates have included).
So in this case, just use .menu__active class as the selector for the CSS rule of the li element of that link. But you probably might have to make the selector more specific to overrule other rules, like #main-header .dropdown.menu > li.menu__active > a.
Each product has multiple variants, which are linked to different thumbnails.
I can click to each thumbnails to preview it on a bigger size
I would like the border of the active thumbnail to be more visible.
I have tried these codes with :active and ::selection but it doesn't work .
.productThumbs li img::selection {
border-color: #ee0a3a !important;
}
.productThumbs li img:active {
border-color: #ee0a3a !important;
}
I have little experience with :active or ::selection attribute
Link of a product page: https://www.tresor-ethnique.com/collections/africain/products/boucles-oreilles-fleur-etoilee?variant=6090700914718
You're looking at the wrong CSS selector. Also, :active has an entirely different meaning in this context. It means a link that's currently being activated by the user (think of a link currently being moused down on): Read more here.
The selector you want is this either:
.productThumbs li .active
or
.productThumbs li .active img
This would make your statement look like this:
.productThumbs li .active img {
border: 1px solid #ee0a3a;
}
Or instead of using border: 1px solid #ee0a3a; you can use box-shadow: 0 0 0 5px #ee0a3a; if you want an easy way to have a larger border without the photo size shrinking.
Hi my website is http://eeeonlinecourse.com/
I would like to style my menu bar using border-bottom property as follows:
header#top nav ul li a:hover{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
header#top nav ul li a:active{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
I have added these two lines into my child theme's stylesheet. However it does not seem to be working. Right now only the hover property is working fine. I have added an active selector after my hover selector but it is still not showing the bottom-border when the menu link is active. What should I add into my stylesheet?
Is it right?.Let's say when user click "Home", the bottom border will appear (under "Home" link).If so, just adds the css (your css) as shown in attached image. (.current_page_item) is the class added for CURRENT (selected) li. If home selected, then border-bottom will appear.
header#top nav .sf-menu li.current_page_item > a,
header#top nav .sf-menu li.current-menu-item > a,
header#top nav .sf-menu li.current_page_item > a
{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
If you want to see the live demo whether it works just like what you want, you can go to "inspect element" and click on 1(in my attached image).Then, add the css to 2(in my attached image).
And, Good Luck..Sorry if this is not the answer.
Looking at your given code and reference site it seems that you have issue with active link only right?
If so than you can simply remove a.active because there is no active class applied to link.
Instead use
header#top nav ul li.current_page_item > a {
border-style: solid;
border-bottom: thick solid #27CCC0;
}
I hope this will solve your problem.
Try giving: current-menu-item is the active menu link.
li.current-menu-item a:active{ border-style: solid;
border-bottom: thick solid #27CCC0; }
Hope this helps.
I am currently working on the following Wordpress site:
http://2013.whitehallrow.com/
It's obvious that the horizontal menu items are not styled properly. I want the "Media" link to fit on the right side of the navbar; how do I go about changing the width of each item so that they will all fit?
I also want the menu items to be centered, so that the margins on each side are equal. My knowledge of the existing Wordpress theme's CSS is sketchy; could anyone give me some guidance?
This is a little "dirty", because it is specific for your menu and for names that have been included in it. But maybe is useful:
.main-navigation li {
margin: 0 30px 0 0;
position: relative;
}
/* For the distance of the first element */
main-navigation li:first-child {
margin-left: 50px;
}
/* For nulling the distance of the first child element */
.menu-item-type-post_type li:first-child {
margin-left: 0;
}
Of course you can do that.
Look in menu css file and find .your_menu_name li a section. Here look for padding and just adjust size.
For ex. if is padding-left:30px; replace 30 with 10 and see you working menu.
You can customize to by adding hover condition like background-color:#CCCCCC;
You can select each menu item by using CSS3 pseudo class :nth-child(N), refer this. Eg.:
.nav-menu li:nth-child(3) {
display: block;
width: 300px; /*Your individual menu-item width here*/
}
To align your menu to center you have to change your css in style.css (line no: 1460) to following
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
border-bottom: 1px solid #8293FF;
border-top: 1px solid #8293FF;
display: table;
text-align: center;
width: 100%;
}
I'm trying to style a custom menu in the sidebar of a child theme of
WordPress' TwentyTwelve theme.
I'm trying to give a current menu item a grey background.
Unfortunately the "parent" menu item somehow gives the background-color to an area much wider than only the current li menu item.
I'm now using this css code:
.current-menu-item {background-color:#666!important;color:#ff0000!important;font-weight:bold;}
.menu li:not(.current-menu-item) {color:#fff!important;background-color:#333!important;}
To give an example/show what I mean: I'm trying to accomplish it on http://populair.eu, you see on the front page that the menu item "populair" also give a grey background around the image above. The sub menu items are ok.
the weird thing is that it runs ok on my localhost.
I have the feeling that if there would be a < br /> between the < asides> it would be solved but somehow im probably missing something.
Has anyone experience with this? / How it should be styled?
You have to use ".current-menu-item a" to give the background to the anchor link, not to the list item. Also, on your ".menu li a" you may have to "display: block" and "clear: both;". The bigger area is a floating problem.
The best thing for you to do is use either Google Chrome's inspect element software or use Firefox's firebug and select the item, while using either of these you can change the CSS code live. This means that while you are looking at the bit you want to change you can change the code and it will reflect in a way you can see it, you will however need to make these changes in your style.css file on your child theme.
Take a look at the menu that is currently on my website www.driftedmass.co.uk, if that is the kind of thing you are looking for then get in touch with me via the contact form on my site.
If you are wanting to bring down the size of the menu you might need to do something like this (were the <<<< that is the bit you need):
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
>>>> display: inline !important; <<<<<<<<
text-align: center;
width: 100%;
background: transparent;
border-color: #ff0000;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
background-color: #ffffff;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
The bit with the arrows would have originally looked like this:
display: inline-block !important;
I hope this sort of helped you out a little bit.