Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] CSS Menu

Home Forums Support CSS Menu

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #180467
    MaksymPS

    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

    • This topic was modified 4 years, 8 months ago by MaksymPS.
    • This topic was modified 4 years, 8 months ago by MaksymPS.
    #180541
    Tom
    Lead Developer
    Lead Developer

    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

    #180550
    MaksymPS

    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 😉

    • This reply was modified 4 years, 8 months ago by MaksymPS.
    #180607
    Tom
    Lead Developer
    Lead Developer

    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?

    #180614
    MaksymPS

    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 🙂

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.