Impressive theme. I think I am going to use this as a base to build a site for my hotel on it.
One detail that I have noticed is that you have to click to open the drop down menu. I fully understand why - in that its like this to help mobile users access the menu. However, at full size, is there a way we could modify it where they automatically drop down ‘onhover’ instead?
Thank you for your feedback!
It can be easily done by adding this to Child Theme style.css or inside Jetpack Custom CSS field. if you are not using Jetpack I strongly recommend to look into it because it has loads of awesome features.
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
There is a special Custom CSS field in Theme Options but in this case it won’t work properly because of specifics of this code.
Yes, but I only want to add this when its in full size mode, up until the screen size drops to the mobile friendly sizes. It seems like when the screen drops to about 720px is when the menu changes to the mobile friendly style. I will look into how I could put that css you suggest into a conditional statement that only applies this css ‘fix’ when the browser is in a larger mode.
What do you think about that approach?
I just activated the theme and realized something else about the menu system. The top level menu items aren’t clickable at all, even after the menu opens. This appears to fall in line with the mobile-first trend for design but I really want people to be able to visit all the pages in the menu.
Also, I tried the css you suggested (via the custom css area in the theme options) and it doesn’t make the menu open on hover.
Just curious if these are things that can be easily adjusted.
Like I already said about Theme Options CSS field
There is a special Custom CSS field in Theme Options but in this case it won’t work properly because of specifics of this code.
Yes, those items are not clickable and since Bootstrap 3+ has mobile-first approach it is expected behavior. Not that just top level items are not clickable but they are pointing to “#”, so there is no easy way to make them clickable.
This theme uses wp-bootstrap-navwalker for menus and this is expected begavior. Unless developers behind this awesome Nav Walker decides to use different approach menu system will work that way for this theme as well.
To make the hover menu work go in wp-content/themes and create the folder dazzling-child.
Inside it upload a style.css file with the following code
/*
Theme Name: Dazzling Child Theme
Theme URI: http://www.wiredmark.com
Description: Dazzling Child Theme by wiredmark.com
Author: Marcello Silvestri
Author URI: http://www.wiredmark.com
Template: dazzling
Version: 1.0.0
*/
@import url("../dazzling/style.css");
/* Theme customization starts here
------------------------------------------------------- */
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
You can change whatever you want (this is just my style.css) but DON’T change the following line
Template: dazzling
After uploading this style.css go in your Wordpress themes and activate Dazzling Child Theme. Cheers
Oh, sorry I missed that part below the code where you mentioned it wouldn’t work there.
I created a child theme and they drop down like I was saying but they are not clickable. Thanks for explaining about the wp-bootstrap-navwalker base for the menu system. I am really kind of confused why they would disable the top level menu items for normal browsers but at least I have a place I can do some more reading and see if there is a solution or a workaround… I guess I can rework my menu system as well if I want to keep with this theme. So far I really like the overall layout of it and I think I am going to. Thank you for your attention to this thread!
Mcsolas,
Yes, most likely there is an easy workaround this if you look on Github for feature requests and support threads.