Hi, Trying to adjust spacing/padding of drop down menu items, tricky to pinpoint the relevant css to be edited- in particular, the padding of items in the drop downs and the 'blank' space between the top menu and the drop-downs, and hover colours? Not asking for free development work, but a pointer would be great!!
Responses (5)
-
Accepted Answer
Hi Tom,
It is a bit difficult to explain everything, especially when you have made some customizations already.
Anyway, I'll do my best...
The blank space between the Top Menu and the Dropdown is caused by the modification you have made. You have added somemarginto the Top Level Menu items and it is pushing the Dropdown menu down.
Currently your havemargin: 20px 0;which means 20px margin on the top and 20px margin on the bottom. You can change that tomargin: 20px 0 0;which means 20px margin only on the top.
Regarding customizing the styling of the Menu - here's what you need to do:
1. Add the following code to your custom.scss file and modify it as you wish:
// You need to import the Dependencies only once, at the very top of the "custom.scss" file.
// If you already have it, do not import it again.
@import "dependencies";
#g-header {
.g-main-nav {
.g-toplevel {
> li {
// Styling for the default state of the Top Level Menu items
> .g-menu-item-container {
}
// Styling ONLY for the Active state of the Top Level Menu items.
&.active {
> .g-menu-item-container {
}
}
// Styling ONLY for the Hover state of the Top Level Menu items.
&:hover {
> .g-menu-item-container {
}
}
}
}
// Styling for the Dropdown
.g-dropdown {
.g-sublevel {
> li {
// Styling for the default state of the Dropdown items
> .g-menu-item-container {
}
&.active {
// Styling ONLY for the Active state of the Dropdown items
> .g-menu-item-container {
}
}
&:hover {
// Styling ONLY for the Hover state of the Dropdown items
> .g-menu-item-container {
}
}
}
}
}
}
}
2. "Recompile CSS" under the Base outline.
Here, have a look at this video that I recorded for you. It shows everything in great details.
Tom, please, please try to do those things on your own, as they are customizations and customization requests are out of the scope of support.
Yes, I do understand that you are not asking for free development work, but there is simply no way to prepare a helpful reply for you without actually doing development work and spending an hour on it.
Thank you for the understanding mate. -
Accepted Answer
-
Accepted Answer
Your Reply
Please login to post a reply
You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here.
Register Here »
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.
InspireTheme is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.
InspireTheme is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.