in the "ul" Elememt it shows that it has padding on the left side (padding is green and the orange is margin
but when I looked through what I've got in my CSS structure i do not not have any padding at all
My Nav Bar elements
I tried to fix it by checking through the dev tools but nothing happened and then I tried removing some properties in my CSS but it didn't make any changes
The user agent stylesheet of the browser itself is applying that padding. If you want to get rid of it, you'll need to override it by setting:
ul {
/* All your other ul styling here... */
padding-left: 0;
}
Thanks in advance. for looking at the question.
my site www.ezensure.com is built on gantry wordpress template.
is there a way that i can reduce the hight of the the Top module position. so that the height of menu and logo decreases by 50 %. I paln a slim menu and logo.
You can slim down the top section by overriding the CSS like this or similar:
.gf-menu.l1 > li > .item {
line-height: 10px;
}
.gf-menu li.parent > .item:after {
margin-top: -6px;
}
.logo-block {
margin: 2px 10px;
}
To override the CSS, add the above code to a custom CSS file at /wp-content/themes/[TEMPLATE]/css/[TEMPLATE]-custom.css
The official instructions for adding a custom CSS file are at: http://www.gantry-framework.org/documentation/wordpress/tutorials/custom_stylesheet.md
Another option you may not have considered is to use the RocketTheme "Anacron" theme (or similar) which has a scrolling header that scrolls away to nothing as you page down, and reappears when needed if you scroll back up: http://demo.rockettheme.com/wordpress-themes/anacron
I'm trying to edit the default menu for Wordpress TwentyTwelve theme. So far I have made the sub-menus horizontal but they don't align the same in Firefox than Chrome.
In Ff it looks as I want, but in Chrome, the sub menu align with the Menu item previously clicked, NOT to the far left of the main menu.
basically, I want a horizontal two-lines menu. I can' t get the "position:"" properly.
Here's how it looks in both browsers:
Here's how it looks in both browser:
Chrome:
http://imageshack.us/photo/my-images/248/cssmenuchrome.jpg/
I can't post more links because I need 10 reputation but the second image (menu in Firefox) in there too.
And here's a fiddle of my code so far:
http://jsfiddle.net/ZN9my/
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation .menu-item li {
display: none;
margin-right: 14px !important;
}
Your problem, as you say, is that both browsers seem to be dealing with your position:absolute; differently. position:absolute should be calculated in regards to the most recent parent element with an explicitly set position, which means that it's actually Chrome which is interpreting it right.
In this case, you've given .main-navigation li a position:relative, which means that Chrome is positioning the submenu, li.sub-menu, relative to it. If you remove position-relative from the CSS for .main-navigation li and add it to ul#menu-main, then li.sub-menu will be positioned relative to the main navigation ul, and should behave as you want it to across browsers. You'll probably want to change .main-navigation li ul's top from 100% to something like 37px so it still sits in the right place.
I've made the changes to your jsfiddle as well: http://jsfiddle.net/ZN9my/1/.
I'm wondering how mashable.com hides its menu button - which appears in the top right hand corner - when the page is above a certain width and disappears when the page is below a certain width. A specific CSS rule:
html.no-touch .main-menu li.menu
{
display: none;
}
takes precedence over the rule that displays the icon:
.navbar .nav > li
{
display:block;
float: left;
}
but I can't see how it's doing it since disabling JavaScript appears to cause no ill effects and none of Css classes applied to parent elements seem to change. It seems that:
html.no-touch .main-menu li.menu
{
display: none;
}
should always take precedence, but clearly doesn't and somehow this appears to have been accomplished solely with CSS and I'm curious to know how.
A graphic illustrating this is here.
They are using css #media queries to show and hide different elements at different resolutions.
Mashable.com uses Skeleton which is a very good resposive website design framework. It has well defined #media queries to hide or display divs depending on viewport size.
I have the problem whereby I can't keep my sub menu visible. When I hover over the parent <li> it appears, and then when I move down to select one of the sub menu items it disappears. This is as soon as focus is lost from the parent <li>
I can't find a solution anywhere.
can someone please check it?
http://www.mymediaventure.com/about.php. It is under the Pricing tab. This is so frustrating. other examples I look at seem to work and I can't spot any clear differences that would hint why theirs works and mine doesn't.
Thanks in advance.
The problem is in styles.css and has to do with your #main_content h1 title element overlapping your div#primary_navigation. You can fix it by setting a higher z-index on your navigation element as I've done in the example below.
#wrapper #top #right div#primary_navigation
{
position : relative;
z-index: 2;
font-size : 11pt;
margin-top : 72px;
}
And a little further down in the CSS:
#main_content h1
{
position : relative;
z-index: 1;
top : -20px;
font-weight : normal;
}
If you want to visually see the problem, add a background colour to your #main_content h1 and you'll notice it almost completely overlaps your tabs. As a result you can trigger the dropdown when you hover over the top of the Pricing tab, but as you move down to the sub items, your mouse goes over the title and the menu disappears.
#main_content h1 {
font-weight:normal;
position:relative;
top:-20px;
}
THis is the problem, try deleting the position:relative, or change it to something else, ie:absolute
My solution to this was to expand the padding around the parent so that the selectable/hover region was larger.
In my case I set something like: .nav a {padding: 20px;}
I had a similar problem and I've found a solution for mine. Now I'm not versed in coding at all, some light Dreamweaver, but that's about it. I was having this problem with a tumblr theme and none of these solutions worked. Only after changing top: 25px; to top: 20px;, the dropdown did work for my site. Hope this helps someone.
I followed the advice of the previous poster but with modifications. I changed all of my relative positioning to absolute for all items on the page (header, menu, and content) and this fixed the menu problem. I had to change for all three items for the menu to stop disappearing on mouseover.
I had a margin set on the <ul> which I removed and put on a div containing the <ul>.
anyway I managed to get a drop down menu from image hover effect, example and example code here dropdown menu from custom button image hover
I hope this helps someone
I had a similar problem: a drop down menu disappeared when the mouse pointer hovered over a part of the drop down menu at which underneath a adsense ad was shown. Putting the ad down in the html page solved the issue. Did not try out other solutions.
I also had this problem. The problem was that there was a space between where the main menu ended and where the dropdown menu began, so while moving the nouse down to the dropdown options, it would pass over an area of the background and the menu would disappear.
The fix was adjusting the top position as shown below (in my case, from 4.0 to 3.75em)
.main-navigation ul ul {
position: absolute;
top: 3.75em;
I had the same problem with the secondary hover navigation going away when i tried to move from the primary to the secondary menu. What seemed to help for me was to move the margin up into the primary menu. I added the following line to my already existing ul li ul { margin-top: -.1em; }