Archived topic
How can i add designed menu like this and sub menu text hover border
5 replies · Started by Jai Hari Shankar on July 11, 2018
https://www.premierleague.com/ you can check the exact link.How can i add exact type of menu design and sub menu text hover border.
I have tried to make my website like that https://stockwizaards.com
code i used is below
@media (min-width:769px) {
.secondary-navigation .main-nav ul li.nav-button a {
background-color: #00337f;
border: 2px solid #ffffff;
border-radius: 8px;
color: #ffffff;
}
.secondary-navigation{
border-bottom: 2px solid #d3d3d3;
}
.secondary-navigation li:hover {
border-bottom: 2px solid #000000;
}
.secondary-navigation {
margin-bottom: 5px;
}
}
is the code right til now ??
Hi there,
Are you talking about the mega menu (columns) and the bottom border or just the border?
If you are talking about the mega menu as well then you might need to check out a plugin for that as the style of our mega menu is different: https://docs.generatepress.com/article/building-simple-mega-menu/
Let me know.
Leo,thanks for your reply.Am not talking about mega menu.Kindly click on the premier league link i provided and look at there primary menu.Its in designed shape.I want like that.And when you click on any link in that menu,you will see pink background in sub menu and text gets underlined when hovered.So i want to make mine like that.
I did check out the link.
What do you mean by "designed shape"? Like it's in two columns?
Try this CSS for the hover border:
.main-navigation .main-nav ul ul li a:hover {
border-bottom: 1px solid #000;
}Leo that code is giving border below entire row of text -i want just below the text a line to come not at separation.Why don't you refer the site which i provided.
This has been covered here.
https://generatepress.com/forums/topic/primary-navigation-menu-going-outside-its-background-image/
Please could you try to keep related support requests within one Topic. It makes it easier for us to answer your requirements. Thank you.
