I am getting an issue with dynamic drop down menu.
Please check the screenshot.
here I am getting the child menu list fixed into right side to screen. It is not viewing correctly. I want to get this list either left side or upper the screen.
Sorry poor english. Hope You understand.
Any help will be greatly appreciated.
Thank you
Looking at: http://www.d1079363-74.cp.blacknight.com/dev/
In your HTML, you need to add another class to the submenu that should open on the right, like this:
<ul class="sub-menu open-right">
Then add this new CSS:
#menu ul ul ul.open-right {
left: -100%;
}
That should work, but I haven't looked at all your CSS. On the off chance that it doesn't work, try using left: -100% !important; instead. If that works, I'll have a look at how to fix the specificity without using !important.
Related
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
I cant really describe the issue that well other than that when I hover the menu appears no problem but when I move the mouse down to select an option it closes again.
In the real version of the site I will be using images instead of the background-colors so it would be great if I could keep the transition without breaking anything.
The code I am currently using for the drop downs is as follows:
#navigation ol#nav-holder li ul.dropdown{
display:none;
}
#navigation ol#nav-holder li:hover ul.dropdown{
display:block;
}
http://jsfiddle.net/c2aah2as/ < To show the issue in more detail.
I have never ran into an issue like this before when creating drop downs so I hope I am just missing something simple!
Hope this is understandable.
Thanks,
Luke.
The problem is caused by <div id="nav-bottom"> which stays on top of the menu and interrupts hovering. Issue can be fixed by raising the z-index of the <li>-element on top of <div id="nav-bottom">.
I've wanted to replace the letter menu (left hand side) that I have in my personal web site for quite a while. I went looking for a decent accordion style menu and found this one that looked like it would be fairly easy to implement and do what I wanted.
Changed things around a bit so that the menu, by itself, looks like this.
Okay, so far so good. Until I try to drop it into my existing development web pages where it only basically resembles the 'stand alone' menu.
I've looked for conflicts in the CSS - but not being good at it, I found none. Can any of you gurus offer some pointers for me.
My apologies for including the links, but that was the best way, I think, to show what's happening.
I see that others have used the same basic menu but can't find anything resembling what I'm seeing.
//al
(edited this to remove two words - grammar!)
Your menu is embedded within:
<div id="container">
<div class="menu-item" id="menu-item-4">
...
Your #container style creates padding space:
#container {
padding: 0 20px 0 10px;
}
Putting it under the nav style like in your example of the menu by itself should solve the problem:
<nav>
<div class="menu-item" id="menu-item-4">
...
I believe on the first site demo, the author used a reset margin and padding to 0 to all elements, using the * selector, like so: * {margin: 0; padding: 0}, I think you're missing that in your css, for the following:
.menu-item ul, .menu-item h4{
margin: 0;
}
AND also your #container has a padding on the left side, I don't know if its something you wanted, but if you want to make it like in the demo site, you could just remove it:
#container{
padding-left: 0;
}
Listen; I have read and read but couldn't find an answer that fit my problem.
I'm using Fancy Box on my website http://www.houdi.se/video.shtml but have the problem that the Fancy Box appears UNDER the menu when a video-link is clicked (its Responsive).
Viewed in a browser there's no problem since it fill up. BUT when narrowing the browser the menu problem arises. Also viewing the top video in an iPad.
I'm using Adaption-plugin from ProjectSeven for the website. It's a Responsive CSS layout: http://projectseven.com/products/templates/pagepacks/adaptations/index.htm
That plugin also uses Project Seven's Pop Menu Magic 2 for the menu.
I'm not a code wizard but I have tried to increase z-index but it didn't work OR I have not increased the rift one?
Have now spent several hours working with this problem and happy for all help I can get. Just tell me what code you want to see (or have to see).
Remove z-index from this div containing the menu:
<div id="p7PMM_1" class="p7PMMh19" style="position: relative; z-index: 999999;">
The reason that the menu is on top of fancybox is because you're including the script 7PMMscrips.js on the page which manipulates the z-index and position properties of the main menu.
An ease way of solving this would be to just add the following css to your main css file:
#p7PMM_1 {
position: static !important.
}
That would solve the issue but i would not recommend it as using !important is a really bad practice. You can read more about why here: What are the implications of using "!important" in CSS?.
If i where you I would look into removing this script and create the main nav with just pure css instead.
Im no expert but looking at your css file for the navigation bar you don't have any z-index so you could try adding it.
your fancy box css file has several and the lowest is z-index: 8010; so setting you navigation to below that should resolve it.
Try using this code:
.navigation {
background-color: #000000;
background-image: url(images/chameleon.jpg);
background-repeat: no-repeat;
background-position: 0px -60px;
position: relative;
z-index: 90;
}