I am trying to style the main menu bar so the logo and menu items are inline. But after i added the menu it acts strange. it leaves very much space above it and some under it. See pictures i attached for more understanding. I put the strange colors there so its easy to see. How can this be fixed?
Hi, the CSS written for the starter theme dictates this spacing in different ways, so there's no single setting that will help here. You'll need to write custom CSS that overrides the theme's styles. I can help write the CSS if you'd like, but I would need to see the site in a browser to be able to recommend changes.
I would start by adding these styles to Layouts CSS & JS:
@media (min-width: 768px) {
.bg-header-image > .container > .row {
min-height: auto !important;
}
}
.bg-header-image .ddl-nav-wrap {
margin-top:0;
margin-bottom:0;
}
This should help shrink the top and bottom margin around the nav items. Then you will have to make some adjustments depending on the height of your logo. I can help, but I'll need to see this in a browser.
Thanks for your reply!
I changed my custom css to this:
[php]
.main-menu nav {
margin: 0px;
padding 0px;
}
<code/>
and it gave me the result shown in the attached picture. So i think i solved it ? Or you think other changes should be made in the css?
I can't tell if more changes need to be made without seeing it in a browser, sorry. It depends on your theme and the customizations you have made in your Layouts. I would test out the hover states and active states for each link, I would test to make sure any hierarchical menu items show up correctly, I would test to make sure that the menu looks okay on a mobile device, and I would test the menu at different screen sizes.
I can give you access to the website if you'd like to help me with the menu css? In that case how would i go about doing that?
You can put your site up on a server somewhere and paste login credentials in the private reply fields here, or you can create a clone of your site using the Duplicator plugin and post the clone file somewhere I can download it. Then share the download link here.
Thanks, I am able to login. What would you like to change about the current menu?
Thank you.
I would like the style for the menu to be used n the main menu and all sub menu items.
I,m gonna list the styles i would like under. I dont want to ask to much so if there is anyway you can just show me or make it so it will be easy for me to edit that would be great.
Menu words color black.
Color on hover #ffcc00.
the font size, position is good like it is now.
I would also like to display category pictures from woocommerce in the submenu if that is possible?
just show me or make it so it will be easy for me to edit that would be great.
Every override has to be done via CSS. Here's what I have added to Layouts CSS:
.main-menu a , .main-menu a:hover {
color: #000;
}
.main-menu .ddl-nav > li > a:hover, .main-menu .ddl-nav > li > a:focus {
background-color: #fc0;
}
You may need to make additional tweaks to the open menu items, like Shop, depending on how you want those to look.
I would also like to display category pictures from woocommerce in the submenu if that is possible?
This isn't something Toolset is designed to help with, unfortunately. You can add Product Categories to the menu by enabling them in the top Screen Options tab, but then you would need to write custom code to style these nav items using the Product Category images.
ok. thank you for all your help and information! 🙂
