First of all, my site is vitasino.com so that you can do these steps together with me and find out why I am an idiot
Ok, according to
weeblytricks.weebly.com/how-to-make-a-parent-menu-item-non-clickable.html
I am supposed to first right click on your navigation, click "Inspect Element", and find the div that highlights your entire navigation menu.
Did that and found that the div id is "topnav"
Now, step two is editing the CSS and add the code
/* Deactivated Menu Links
--------------------------------------------------------------------------------*/
."div name" .wsite-nav-4 a {pointer-events: none;}
So I did that and the the parents I want to be unclickable are "Services", "Wholesale markets", "Manufcaturing" and "more". In other words it should be menu items 2,3,4,7 right? So I add the code:
/* Deactivated Menu Links
--------------------------------------------------------------------------------*/
.topnav .wsite-nav-2 a, .wsite-nav-3 a, .wsite-nav-4 a, .wsite-nav-7 a {pointer-events: none;}
Should be correct, right? WRONG!
Services are still clickable, Wholesale markets are still clickable, but manufcaturing and fairs are working (althought I dont want fairs to be unclickable.)
What is wrong?
Related
I have been working on this for quite a while, and cannot seem to find why my dropdown menu is not working. After searching many online forums and asking friends, I have no answer. I just want the dropdown to work. I cannot seem to make the .dropdown_trigger class make the .dropdown class hide, or reappear. Any help would be very much appreciated. Linked below are the pages.
Thanks,
Alex
Index Page CSS File
By inspecting the html page provided in the "Index Page" link, there is only one element with the "dropdown" class, and it's empty. It's not clear what your code is trying to show or hide.
<div class="dropdown"></div>
The "dropdown_trigger" class is located in a table header element:
<th>
PROJECTS
</th>
By inspection, there does not appear to be any javascript to trigger any behavior. It does not show up in Source in the Chrome Inspector. Normally, this would be done with JS to use .show() or .hide(), for example if you had jQuery (there are other ways). Or are you trying to create this without JS at all? Are you trying to create dropdown menus with only CSS?
If so, please check this tutorial out:
https://css-tricks.com/solved-with-css-dropdown-menus/
The key part is here:
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
By creating a CSS rule to change the visibility, the dropdown menu can be shown. However, there does not appear to be any HTML content to show in the current linked page you provided. That div is empty.
I cant post it on fiddle. because the problem cannot be recreated there.
Please take a look at my site (open it in "MOBILE" or RESIZE your browser to make it similar like mobile view):
=> my site
if you resize correctly you will see the menu icon (3line icon) on the top left side.
When you click 3line icon you will see "category" menu. then when you click arrow icon you will see "sub category" menu. My visitor will need to click twice just to see the "sub category"
How to make it just 1 click. so if visitor click 3line icon the "subcategory" dropdown is opened by default.
Thanks in advance :)
Use the Media queries and select your CSS Selector for your Element then use display: block;
for example
#media (min-width: #screen-sm-min) {
.dropdown-menu {
display: block;
}
}
https://getbootstrap.com/css/#grid-media-queries
I think you are looking for something like that: Bootstrap nav bars examples
From looking at your website, you'll notice when a 'category' gets expanded, what's happening is the class 'mm-opened' is added to the list item. And from my testing, it seems that the 'mm-opened' class has no effect when on a larger screen (because the mobile nav is its own element). So you should be able to just modify your HTML by adding the class 'mm-opened' to your category items:
So modifying your html inside the 'mobile side nav' element like this will cause a category be expanded by default:
<ul class="mm-listview mm-first mm-last">
<li class="mm-vertical mm-opened">
.....
</li>
I have a problem with a personal project, http://mail.fixca.com.gt/. on Drupal 8 with the profile Brainstorm
The menu doesn't display the submenus created. I have already:
Set Show Expanded mode on the menu item.
Set the max menu level display on the block it self.
Tried to create a new menu and CSS it to get it display the submenu
.submenu{
display:none;
}
.companymenuli:hover > ul{
display:block;
}
but it never shows the submenu. I realise that it might be something I'm just not doing right, but I cann't find the solution.
The HTML on the Drupals Website shows like this
HTML from chrome developer
I think that it might be some kind of restriction on the theme itself.
I really appreciate your help. If you have give mi a hint on where I might be able to find the solution.
Thank you.
Overflow: hidden. is added in below css:
#block-brainstorm-theme-main-menu
Once you remove overflow property from here and also remove display: none. from
#block-brainstorm-theme-main-menu ul ul
Submenu will display. But you have to work on css and js for proper look and feel. Instead I suggest to use some jquery for this.Also you can use modules like Nice menu or Superfish menu for the same. Let me know if i can help you in this.
I have a multi-level drop down menu at http://www.theseymourgroup-comm.net/new/. If you hover over Properties, you will see the first drop down menu come down that includes Commercial and Development. But when you hover over Commercial, you will see that the next level with Active and Sold goes way out to the right. I right clicked that panel and chose inspect element but could not determine what I needed to change in the css to make it move over to hug the first drop down menu. Any help would be appreciated. Thanks
The element with the "Active" and "Sold" entries is absolutely positioned, but it doesn't have settings for top or left / right.
If you add this rule
.nav li ul ul {
left: 150px;
}
you'll come closer to what you want. (I leave the finetuning of that value to yourself...)
I think javascript have some problems. Menu Dropdown use css only.
This is my example. It's very simple for newbie
Why is that when i hover my mouse pointer to the a link the hand wont show up
the hand is the one that click the link for it show up when you hover on the list but mine wont.
the first line of the list the hand show up for the whole area but the other list just the half of the area.
Here is my fiddle : http://jsfiddle.net/TBEnf/5/
Working fiddle: http://jsfiddle.net/TBEnf/7/
.UploadPicture ul li a should have display:block;