Archived topic
CSS Menu
4 replies · Started by MaksymPS on March 20, 2016
Hi Tom,
Could you please explain me what I'm doing wrong:
This is markup - the same for every menu style:
<nav class="menu menu--prospero">
<ul class="menu__list">
<li class="menu__item menu__item--current">
<a class="menu__link">Home</a>
</li>
<li class="menu__item">
<a class="menu__link">Who we are</a>
</li>
<li class="menu__item">
<a class="menu__link">What we offer</a>
</li>
<li class="menu__item">
<a class="menu__link">Our news</a>
</li>
<li class="menu__item">
<a class="menu__link">Contact us</a>
</li>
</ul>
</nav>I want to put next code to my menu's CSS on my website:
.menu--prospero .menu__link {
position: relative;
display: block;
margin: 0 1.5em;
padding: 0.75em 0;
text-align: center;
color: #b5b5b5;
transition: color 0.3s;
}
.menu--prospero .menu__link:hover,
.menu--prospero .menu__link:focus {
color: #929292;
}
.menu--prospero .menu__item--current .menu__link {
color: #d94f5c;
}
.menu--prospero .menu__link::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background: #d94f5c;
transform: scale3d(0, 1, 1);
transition: transform 0.1s;
}
.menu--prospero .menu__item--current .menu__link::before {
transform: scale3d(1, 1, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.3s;
}But I'm a little bit confused.
I have a look in Developers Tools the HTML. And as I understand, for example, the code of 1st button in menu "Главная" is:
<nav id="site-navigation" class="main navigation">
<ul id="menu-menyu-1" class="menu sf-menu">
<li id="menu-item-916" class=" ... menu-item-916">
<a hraf="http:vetlikar.com">Главная</a>
</li>
</ul>
</nav>So, if I want to put that CSS I have to rename next words like this?
.menu--prospero = main navigation
.menu_link = .main-navigation a
.menu_link:hover/focus = .main-navigation a:hover/focus
.menu__item--current - .menu-item-916
.menu__link::before - .menu-item-916::before
Hi there,
I think it would be:
.menu–prospero = .main-navigation
.menu_link = .main-navigation a
.menu_link:hover/focus = .main-navigation a:hover/focus
.menu__item–current – .main-navigation ul .current-menu-item > a
.menu__link::before – .menu-item::before
Tom,
Thanks for answering!
It seems it's hard to make just using a Simple CSS plugin. I guess it has to be changed in style.css all .mai-navigation classes...
Why I was asking? I found an amazing examples of menues, (page how to do) and wanted to make it with GP, but I couldn't.. (not good enough at HTML and CSS)
I renamed all theirs .menu classes into a .main-navigation and put it into a Simple CSS plugin,
.main-navigation .main-navigation a {
position: relative;
display: block;
margin: 0 1.5em;
padding: 0.75em 0;
text-align: center;
color: #b5b5b5;
transition: color 0.3s;
}
.main-navigation .main-navigation a:hover,
.main-navigation .main-navigation a:focus {
color: #929292;
}
.main-navigation .main-navigation ul .current-menu-item > a .main-navigation a {
color: #d94f5c;
}
.main-navigation .menu-item::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background: #d94f5c;
transform: scale3d(0, 1, 1);
transition: transform 0.1s;
}
.main-navigation ..main-navigation ul .current-menu-item > a .menu-item::before {
transform: scale3d(1, 1, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.3s;
}
and it doesn't work :(
Anyway thanks for helping ;)
Ah yea, that would be pretty tough - you need to make sure all classes align with the ones they're using, and that you have all of the same CSS.
Currently, I don't see any of the CSS on your site? Did you remove it?
I just pasted the code above (.main-navigation) into a Simple CSS, saw that there wasn't a result and didn't save it.
It would be awesome if you add something in GP!)
Anywahy, thanks or helping!)
P.S. if you will have any information how to do it or something else, please, write!) I'm here and will see your message.
P.P.S. if you have few minutes, you can log in my site and paste this code into Simple CSS (Customize) and see a result :)