- This topic has 21 replies, 4 voices, and was last updated 1 year, 7 months ago by
David.
-
AuthorPosts
-
November 8, 2020 at 6:14 pm #1523147
troyw
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
November 9, 2020 at 4:13 am #1523620David
StaffCustomer SupportHi 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/November 9, 2020 at 3:37 pm #1524600troyw
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
November 10, 2020 at 2:48 pm #1525984troyw
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
November 10, 2020 at 7:07 pm #1526130Leo
StaffCustomer SupportSorry 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/November 10, 2020 at 7:15 pm #1526138troyw
Thanks Leo
November 11, 2020 at 12:29 am #1526344David
StaffCustomer SupportCan 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/November 11, 2020 at 1:18 pm #1527427troyw
Try this David
November 12, 2020 at 2:55 am #1527966David
StaffCustomer SupportThats 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/November 12, 2020 at 10:18 am #1528757Tom
Lead DeveloperLead DeveloperI’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-developmentNovember 12, 2020 at 2:42 pm #1529008troyw
I 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.
November 12, 2020 at 2:48 pm #1529017troyw
Please also see this image
November 12, 2020 at 2:59 pm #1529028troyw
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’
)November 13, 2020 at 1:04 am #1529407David
StaffCustomer SupportIn 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/November 13, 2020 at 1:49 pm #1530362troyw
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
-
AuthorPosts
- You must be logged in to reply to this topic.