- This topic has 21 replies, 4 voices, and was last updated 3 months, 2 weeks ago by
.
-
Posts
-
Hi team,
I have asked about this previously, but am still really stuck.
I am using your mega menu which looks and works great, but it is limited to 5 columns. You suggested instead using Mega Menu plugins, but they are causing lots of problems, so I am back to your mega menu.So I have adapted your CSS and added more columns to the style sheet like so;
` nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}nav .main-nav .mega-menu.mega-menu-col-6>ul>li {
width: 16.6%;
}nav .main-nav .mega-menu.mega-menu-col-8>ul>li {
width: 11%;
}The problem I am having is that I cannot seem to get the alignment of the columns equal. I believed that the 8 column mega menu should have a width of 12.5%, but this does not work. The only way it works is if I set it to 11%, however the spacing between columns is not equal?
How do I make equal spacing between columns?Thanks
Customer Support
Hi there,
the Mega Menu will automatically create new rows, so if you set up a 4 x Column mega menu and assign 8 sub menus it will wrap over 2 rows. The new flexbox version causes the incorrect columns. Try updating the CSS to this:
@media (min-width: 769px) { nav .main-nav .mega-menu { position: static; } nav .main-nav .mega-menu>ul { position: absolute; width: 100%; left: 0 !important; display: flex; flex-wrap: wrap; } nav .main-nav .mega-menu>ul>li>a { font-weight: bold; } nav .main-nav .mega-menu>ul>li { width: 25%; } nav .main-nav .mega-menu.mega-menu-col-2>ul>li { width: 50%; } nav .main-nav .mega-menu.mega-menu-col-3>ul>li { width: 33.3333%; } nav .main-nav .mega-menu.mega-menu-col-5>ul>li { width: 20%; } nav .main-nav .mega-menu>ul>li:hover>a, nav .main-nav .mega-menu>ul>li:focus>a, nav .main-nav .mega-menu>ul>li[class*="current-"]>a, nav .main-nav .mega-menu ul ul { background-color: transparent !important; color: inherit; } nav .main-nav .mega-menu ul .sub-menu { position: static; display: block; opacity: 1; visibility: visible; width: 100%; box-shadow: 0 0 0; left: 0; height: auto; } nav .main-nav .mega-menu ul.toggled-on .sub-menu { pointer-events: auto; } nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle { display: none; } }Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Hey guys,
I have changed the menu to a 4 column and replaced the CSS. This has indeed given me the two rows, but the bottom row is out of alignment still? As you will see, ‘Pro Audio’ should be the last column, but has been added to a 3rd row.
Also, when I change the color of the Main Navigation for the mega menu using the above css, it also changes the color of the main menu (Home sub menu items). Is there a way to avoid this?
Thanks
Hey team,
Not sure if my last response was lost due to me editing it. Any ideas how I can straighten the bottom row of the mega menu and change text to Home drop down menu to white.
Sorry to be a pest, thanks
Customer Support
Sorry we missed the last reply!
I’ve assigned this to David as it looks like he had a good handle on it.
He will get back to you in a few hours 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Thanks Leo
Can you check the URL and IP ? As i am still seeing the original site.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Try this David
Thats the same as before – and sorry but i still can’t access it even after flushing all DNS.
Ill see if one of the other team members can get it to work.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Lead Developer
I’m having the same issue. I’ve added the URL and IP to my hosts file, and flushed my dns, however I’m still seeing what I assume is the old site.
Do you have a temp site you can apply the CSS and menu to so we can see it there?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentI have a dev site which I haven’t used for a while, but it will again need a hostfile update. I added the css and the same issue occurs with the mega menu. Let me know if you can access this one.
Please also see this image
Not sure if this will help, but I am adding this menu css classes ‘mega-menu mega-menu-col-4’ and this is all the css in my Child Theme Style Sheet;
@media (min-width: 769px) {
nav .main-nav .mega-menu {
position: static;
}nav .main-nav .mega-menu>ul {
position: absolute;
width: 100%;
left: 0 !important;
display: flex;
flex-wrap: wrap;
}nav .main-nav .mega-menu>ul>li>a {
font-weight: 500;
}nav .main-nav .mega-menu>ul>li {
width: 25%;
}nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}nav .main-nav .mega-menu>ul>li:hover>a,
nav .main-nav .mega-menu>ul>li:focus>a,
nav .main-nav .mega-menu>ul>li[class*=”current-“]>a,
nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
color: inherit;
}nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: 0 0 0;
left: 0;
height: auto;
}nav .main-nav .mega-menu ul.toggled-on .sub-menu {
pointer-events: auto;
}nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
}
.main-navigation .main-nav > ul > li > ul > li > a {
background-color: inherit;
font-size: 14px;
color: #F4C424;
}.main-navigation .main-nav > ul > li > ul > li:hover > a {
background-color: #1a1a1a !important;
color: #F4C424;
}
@media (min-width:1024px){
.main-nav ul li:nth-child(7) {
margin-left: 80px;
}
}
@media (max-width:768px){
.main-nav ul li:nth-child(7) {
margin-left: auto;
}
}
.clickable-container {
position: relative;
}
.clickable-container a {
position: absolute;
height:100%;
width:100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
}
array(
‘show_top_links’ => ‘true’,
‘show_empty_brands’ => ‘false’
)In your child theme styles i see this:
@media (min-width:1024px){ .main-nav ul li:nth-child(7) { margin-left: 80px; } } @media (max-width:768px){ .main-nav ul li:nth-child(7) { margin-left: auto; } }Remove them to resolve the issue.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/Hey David,
I have removed this CSS from line 83 as you suggested and while it has fixed the menu issue, the space between the ‘phone number’ and ‘My Account’ has been removed. That CSS gave me that gap. Is there another way I can create a gap in the navigation to seperate the account and cart from the site links?Good: https://ibb.co/SJj1F59
Bad: https://ibb.co/F0hkM5CThanks
- You must be logged in to reply to this topic.