We have a Mega Menu under the Products tab in our navigation. I'm running into a problem wherein the Mega Menu slides in directly beneath the Products tab, rather than sticking to the bottom of the navigation bar as a whole. It seems to be overlapping, undercutting the logo and navigation links just a few pixels away.
Is there a way to make this stick to the bottom of the navigation bar, or a way to add padding?
Right now, the Nagivation bar has 30px of padding. This doesn't seem to be represented in how close the Mega Menu is to the logo and links.
Also, I would like to stylize the column headings inside the Mega Menu similar to the way it was done on the Salient Mega-Menu How-To. Is there a way to target these column headings using some custom CSS?
One last thing - is there a way to adjust the column widths inside the Mega Menu? There is a lot of empty space at the moment. Being able to adjust the menu as a whole to condense itself against the right side would be better aesthetically.
I've tried creating a custom CSS class and targeting the Mega Menu columns via the CSS Class option within the Menu editor. No dice. It's as though something overrides the class I've created, as I can apply it to top-level menu links and show that it works. Any help with this and reducing the Mega Menu width is greatly appreciated.
I built our Mega Menu using the article provided. However, there isn't anything in there about adjusting the width of the columns, or styling the font(s) inside the columns. I'm hoping to make the column headers a slightly larger font size and bolded.
As far as the header padding goes - it has 30pixels of padding as it sits. However, the Mega Menu opens up as though there is zero padding. It essentially sticks to the bottom of the Navigation Logo PNG and the Navigation links. I've tried adjusting the padding to include more, but all this does is widen the Navigation bar with zero effect on where the Mega Menu is placed when activated.
I am afraid the Salient Mega menu does not offer such customization options and Custom css would be needed to make those customizations.
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
header#top nav >ul >li.megamenu >ul.sub-menu{
margin-top:50px !important;
}
body:not([data-header-format="left-header"]) header#top nav > ul > li.megamenu > ul > li > a{
font-size:18px !important;
}
Hello!
We have a Mega Menu under the Products tab in our navigation. I'm running into a problem wherein the Mega Menu slides in directly beneath the Products tab, rather than sticking to the bottom of the navigation bar as a whole. It seems to be overlapping, undercutting the logo and navigation links just a few pixels away.
Is there a way to make this stick to the bottom of the navigation bar, or a way to add padding?
Right now, the Nagivation bar has 30px of padding. This doesn't seem to be represented in how close the Mega Menu is to the logo and links.
Also, I would like to stylize the column headings inside the Mega Menu similar to the way it was done on the Salient Mega-Menu How-To. Is there a way to target these column headings using some custom CSS?
One last thing - is there a way to adjust the column widths inside the Mega Menu? There is a lot of empty space at the moment. Being able to adjust the menu as a whole to condense itself against the right side would be better aesthetically.
http://kuatonline.com/dev/nv-2-0/
Hey Again,
Did you try adjusting the Styling in Salient Theme Options Panel -> Header Navigation Section ? .
Best
ThemeNectar Support Team
Yes. Some of the provided options actually break the menu as well. "Full Screen Width" crops the menu and creates a scrollbar inside of it.
Is there a way to target the column header fonts? I'd like to make them a little larger and bolder than the listed links.
If there would be a way to reduce the space in between each column, that would be immensely helpful as well.
I've tried creating a custom CSS class and targeting the Mega Menu columns via the CSS Class option within the Menu editor. No dice. It's as though something overrides the class I've created, as I can apply it to top-level menu links and show that it works. Any help with this and reducing the Mega Menu width is greatly appreciated.
Hey Again,
Sorry for the Delay.
Have you had a look at this Article :Salient Mega Menus ?. Also try adjusting the Header Padding in here : http://prntscr.com/gti7bt .
Be.st
ThemeNectar Support Team
Hey Tahir,
I built our Mega Menu using the article provided. However, there isn't anything in there about adjusting the width of the columns, or styling the font(s) inside the columns. I'm hoping to make the column headers a slightly larger font size and bolded.
As far as the header padding goes - it has 30pixels of padding as it sits. However, the Mega Menu opens up as though there is zero padding. It essentially sticks to the bottom of the Navigation Logo PNG and the Navigation links. I've tried adjusting the padding to include more, but all this does is widen the Navigation bar with zero effect on where the Mega Menu is placed when activated.
Hey Again,
I am afraid the Salient Mega menu does not offer such customization options and Custom css would be needed to make those customizations.
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
header#top nav >ul >li.megamenu >ul.sub-menu{ margin-top:50px !important; } body:not([data-header-format="left-header"]) header#top nav > ul > li.megamenu > ul > li > a{ font-size:18px !important; }Thanks
ThemeNectar Support Team
Tahir, this worked perfectly. I appreciate the help and fix.