I am looking to make some CSS adaptions to this site:
www.cocoto.eu
I want to change the hover color of the main nav menu items (for example "Versandkosten").
Can anyone show me the code that i need to use to achieve that? cause i am not able to find it
Thanks and sorry for this beginner question.
<ul class="main-nav">
<li class="nav-item">
<a class="nav-link">ES24</a>
<a class="nav-link">Versandkosten</a>
</li>
</ul>
So here by using the following syntax : class1>class2>class3, you can style the link on hover as wanted.
.main-nav>.nav-item>.nav-link:hover {
color: red;
}
Check this link for details of different states of a link :
https://www.w3schools.com/css/css_link.asp
<a onMouseOver="this.style.color='#FF4223'"
onMouseOut="this.style.color='blue'"><u>Hower me</u></a><br>
.main-nav>.nav-item>.nav-link:hover {
color: yellow;
}
Related
I have this specific tag around 8 or 10 times in my code I want to edit the colour of the word in between the colour white but the double class system is not working for me the tag already has a nave-link class and then I added the navi class to edit it,I do not know to solve this problem one approach is to style those a million times manually I am pasting the code of index.html and style.css
PS: I almost forgot to mention I am using bootstrap for my project so this is the code in between the nav ie navigation bar
this is the html code
<li class="nav-item">
<a class="nav-link navi" href="index.html">
Home
</a>
</li>
and this is the css code
.navi
{
color:#fdfefe;
}
When using multiple classes the later ones override the earlier ones.
.first {
color:red;
}
.second {
color:green;
}
<p class="first second">yo</p>
This will result in a green text
I have problem with with adding the hover.css effects, which I get from here.
First, here is the sample HTML that I have created.
In the NAV BAR you will see two Personal button. One is with the hover effects and another one is without the hover effects but with the Mega Dropdown Menu.
Second, what I'm trying to do is to add the hover effects into the second Personal button.
<li class="droppable nav-item pos-menu hvr-sweep-to-bottom">
<a class="nav-link personal-hover" href="#">Personal</a>
<div class="mega-menu personal-menu-content">
...
</div>
...
</a>
</li>
Every time I try to add hvr-sweep-to-bottom class into the <li>, the drop down menu will always gone.
Here's the HTML directory file in case you want to access to the .css/.js.
Hope someone can help me with this, with many many Thanks! :D
You need to do two things
Remove the padding from the .pos-menu element that is your <li>. This will ensure the <a> tag inside gets full width.
.pos-menu {
border: 1px solid #DF1E34;
border-radius: 50px;
margin-right: 10px;
overflow: hidden;
}
Update your HTML like below. The hvr-sweep-to-bottom should be on the <a>.
<li class="droppable nav-item pos-menu">
<a class="nav-link personal-hover hvr-sweep-to-bottom" href="#">Personal</a>
<div class="mega-menu personal-menu-content">
...
</div>
...
</li>
To maintain the hover effect if cursor remains inside the mega-menu
.pos-menu:hover .hvr-sweep-to-bottom {
background: rgba(0,0,0,.7);
}
Hope it helped.
Please help solve the problem, because my ideas have been exhausted...(
I have a :
<nav class="nav_editor" ng-show="status.editorMenuOn">
<ul class="menu_editor">
<li class=""><a ng-href="/articles/user/{{ status.userID }}">My Articles</a></li>
<li class="">Create Article</li>
<li class="">Comments</li>
</ul>
</nav>
And a CSS classes:
.menu_editor li a {
color: rgb(125,125,125);
font-size: 1.25vw;
margin-right: 20px;
text-decoration: none;
}
I want to make highlighting the item in the menu when this page is active (not pseudo ":active"), just when someone watching current page, for example "My Articles".
I have tried about 3 variants by CSS/HTML only, JavaScript and jQuery, but it is either not working properly or not working at all.
Please help solve this problem.
Thank you in advance!
When the myArticle page loads, just do jquery addClass method.
$(document).ready(function(){
//remove highlighted menu buttons on pageload
$(".menu_editor li").removeClass("activeMenuItem");
//add class only to the specific one
$(".foo").addClass("activeMenuItem");
});
I would like to add a divider - a simple solid line - to separate a series of links in a dropdown menu option. I'm not entirely certain as to how to go about though. I have the below coding but it isn't creating the impression that I desire. Also Im unable to understand how I would then customise this 'divider' to look the way I would ideally want it to appear.
<li><a href='#'>Social</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
<ul class='dropdown-divider' aria-labelledby='dropdownMenuDivider'>
<li><a href='mailto:blankesque#hotmail.com'>Email</a></li>
<li role='separator' class='divider'></li></ul>
</ul></li>
Any help in this matter would be greatly appreciated. Thank you in advance.
Iram
There is no Css there, so i went ahead and did something there.
ul li {display:block;margin-right:2px;
min-width:60px;
text-align: center;
height: 25px;
border-bottom:1px solid black;
}
Check the link, let me know, do you want it to be displayed horizontaly or as it is now, vertically?
http://codepen.io/damianocel/pen/RWEVPW
I always wondered how to get rid of the dotted border that covers active links right afer clicked.
I tried a:active { border:0;outline: none; } and it didn't work. I don't think that is a border, that's something chrome adds, also firefox and ie add it their own shape.
Any help would be truly appreciated.
my code :
<ul class="footer-links">
<li id="main" class="icon-bookmark">help</li>
<li class="icon-pencil">new topic</li>
<li class="icon-chat">contact</li>
<li class="icon-search">search</li>
<li class="icon-flag">report</li>
</ul>
My link if needed : http://dvforum.elegance-style.com
Screenshot:
Use the :focus class.
a:focus{ outline:none; }
You should however, consider adding alternative styles to this class, as purely disabling it will hinder usability.