I have problem in displaying drop-down menu. Please, see the example on:
http://staging.gwynconsulting.com/rif/hello-world-2/
When I hover 'Rent it finished', I can't display all menu items.
I tried to play with many css properties, but I can't make it work...
Thank you...
The first sub-item being cropped is due to two overflow: hidden; CSS instructions on #header and #nav.
Remove both instructions and you'll see sub-menus.
As your list-items are floating, #nav no longer have flowing content and thus has an height of 0: background has disappeared.
You should put your background-images on each individual floating list-item whether than ul or a parent.
From an accessibility point of view, you should not add title attributes on your links except if necessary. Here the text of your links are explicit as is and your titles are strictly identical to text: your titles are unnecessary.
Home <!-- not OK. Title attribute should be removed -->
Download our brochure <!-- OK, 2 useful infos about format and size added -->
Download our brochure <!-- not OK, title should include the text of the link and add sth to it -->
You need to add a z-index and a positon to your main and content div's top push them back behind the nav div. See http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
And one of your style sheets throws a 404: http://staging.gwynconsulting.com/rif/wp-content/themes/rif/js/gallery/jquery.ad-gallery.css
Related
I got the the drop down menu to work using text instead of an image and I got the drop down menu to actually go up (added bottom: 100%; to nav li ul) but I still can't seem to get the CSS formatting right.
Below is a link to my test page as well as the style sheet...
Need help making my footer navigation be in one line instead of having the new drop down Services menu on it's own line.
Need to simply center the drop down / up sub menu items when you hover over the main Services link.
http://wsgdev.com/ceiltex/indextest.html
http://wsgdev.com/ceiltex/styles.css
Thanks so much in advance for any help!
Remove the width: 100% and add display: inline-block to the nav element (style.css line 27)
read more about inline and block elements
I absolutly know that you will downvote this question, but I cannot repeat this problem in jsfiddle or with custom html, so I can only show it using webpage.
If I understand the problem, I will update question with appropriate html code.
If you visit website http://tax.allfaces.lv/, you will see three menu items. If you click on first or third menu item (Home and Contact US), then everything is fine.
Merchants contains submenu. It is not so obvious, but if you click on second one (Merchants), then you see that the whole content is moved some pixels to the right comparing with Home and Contact Us page. If you just click "Home" and "Merchants" one by one, you can see that for "Merchants" all content is some pixels to the right.
EDIT:
This is related to webpage height and scrollbar.
Add this code to your body to keep the scroll bar all the time to avoid this issue
body {
overflow-y: scroll;
}
It's because the scrollbar disappears because all of the content fits in the page :)
its because the scrollbar on the side dispears ;)
what you could do is show the scrollbar at everypage so it doesnt move.
Guys
I am having hard time tweaking a CSS part of the menu.
I have a website here at http://aaron.wordpresstiger.com where the last title "CONTACT" of the menu comes up with a line ahead and doesn't fits the menu. though i was successful in getting the "HOME" first menu item correctly fitting the menu but not the last one.
Can you please tell me what CSS i should add to fix this MENU problem. Also, please have a look i need the last item of the menu to be showing as same css as the first one (HOME).
I need the menu's items to look similar to the one here:
http://officialfacebooklikes.com/index.html (have a look at the last "CONTACT" which fits the menu correctly).
I look forward to hearing back for HELP :)
Regards
Muzammil Rafiq
in your css you will want to add two styles
#access li {
width: 25%;
}
#access li:last-of-type, li#menu-item-31{
border-right: none !important;
width:24% !important;
}
the first will make each menu element 1 quarter of the width... the second removes the right border on the last element and re-sizes it to fit properly on one line of the navigation bar.
the !important tags may not be necessary but they will ensure this works on the first go.
Well, if you want to create a horizontal menu you should float the list items. But as I can see from your example website you want the list items to be even in width, so you need to put those list item into containers, determing the width for each list container and float those. Also text-align center your a tags.
Good Luck!
I'm developing a child theme for the Buddypress default theme. I have customised the look of the navigation bar quite a lot, and now I am trying to get drop-down menus working. They work fine in the default theme. In the default theme a class is added to list items in the nav bar that are hovered over, .sfhover, and this div class has the CSS 'position:relative;z-index:1000'. The #container div that the drop-down menus should stay on top of has the CSS 'position:relative' and no z-index set. Presumably this means that the z-index is the default of 0. Finally the #header div which includes the nav bar has the CSS 'position:relative;z-index:1000'.
I have checked that in my child theme all of the CSS is the same for these three divs, and indeed it is, and yet the drop-down menu does not show above the #container div, but is cut off where the #container div starts.
You can see what I mean if you visit this page, and hover over the 'links' items in the nav bar. You will need the following credentials to see the page as it is password protected:
Username: guest
Password: stackoverflow
Perhaps someone can spot why this isn't working as expected with my child theme?
Thanks,
Nick
there is nothing wrong with your z-index. You have the #header set to overflow: hidden which means that nothing will flow out of it your nav sub menu included. Remove this and you will be good.
problem is in <div id="header"> block which has property overflow: hidden and it hides everything that out of it dimension. You have to remove it and if you use it for clear floats, try another method: boilerplate clearfix or just add div with clear:both after <div id="header">
Stack,
I'm having difficulty creating a good drop down navigation menu using only css. The menu is simple, it needs to only have a few things in it, and only needs to drop down (no need to go down and over etc).
The menu is somewhat working, but whenever I hover over it to drop it down, the menu gets overlapped by the wrapper div directly below the header div where the menu is located. I've tried setting the z-index of the drop down menu to like 20000 and it is still being overlapped.
Here is a direct link to the test page I am working on:
http://www.lolbrary.com/workspace/dropdownheader.php
Any ideas?
Thanky,
billmalarky
In #fullheaderbar and #profilemenu you need to remove overflow:hidden; and in .profile-menu ul you need to change position:relative to position:absolute;
then tweak from there :)