Can someone help me figure out why my pull down menus (buildings, BV Mail) are showing up as being transparent on some of the pages and not the others.
The address is www.bv340.com.
Let me know if I can provide any more information.
Also, it doesn't seem to matter what browser, they all do the same thing.
I don't believe they are showing up as semi-transparent.
This is an issue with your z-index on the menu
Try adding the following to #p7menubar li ul:
#p7menubar li ul {
z-index: 1;
}
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'm working on my navigation bar, and when I first started working on it, I figured out the display: none / display: blocked thing to make sure it worked, and then set everything to display so I could see what CSS changes were taking effect without having to go and re-hover over everything. Once I had things the way I wanted them, I went to go turn the display "off" but found it suddenly wasn't working. I managed to go back and re-tweak most of the levels, but my last level wont work, even though the same basic syntax works elsewhere in my CSS. What's going on?
Here's a JSfiddle:
enter code herehttp://jsfiddle.net/yu1p1fo6/
The two classes were incorrectly named drop-down instead of drop-menu
You have used wrong class name in that part. It is not drop-down, it is drop-menu:
http://jsfiddle.net/yu1p1fo6/2/
.sub-menu li .drop-menu {
display: none;
}
.sub-menu li:hover .drop-menu {
display: block;
}
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">.
It being two days and i am punching my head due to IE 7 and IE 8. When my web site (built in drupal) is loaded, it shifts to right side. Link is below :
http://goo.gl/GkMF6Z
I applied overflow hidden etc, but nothing is working and the page still moves to right side.
I need help to fix this issue.
Thanks in advance.
Note: If someone give me details for a fix and it worked, i will offer a bounty of 50 points to correct answer after two days.
Looks like.. problem is with your doctype declaration. Can you check that once?
I got the issue
Issue is with your #menu #naviagtion_menu li ul try making that display:none and everything will be fine. Menu has position:absolute; left:-999em which is creating space. Try playing with display properties instead left.
Solution :
#menu #naviagtion_menu li ul { left:auto; display:none;}
On hover of parent ul show this #menu #naviagtion_menu li ul with jquery/ javascript like you are doing with position left.
http://wilwaldon.com/itsbroken/templateleftnav.php
As you can see on the left navigation the link for Template 01 is highlighted green. The link underneath is also highlighted green.
I think the problem lies with the initial LI controlling the ul underneath somehow.
I need to keep the xhtml formatted exactly how it is right now and only change the CSS to fix this problem.
I'd appreciate any help you may be able to point me in the right direction, I'm pretty stuck at this point.
Thank you in advance!
The green background for the highlighted li element goes for the entire element, including the nested ul. To get around it, override the text and background color of the nested ul like this:
li.leftactive ul {
background-color: #E3DECA;
}
li.leftnav1b a {
color: #363;
}
You might want to tweak margins and/or padding as well, but this should get you started.