this is my site http://www.noor-azmi.com/element/index.html
There is a white space between the navbar and the carousel below
I already tried the
.navbar { margin-bottom: 0; }
but it does not work. It only worked when i changed the carousel to a normal img image.
<div class="banner" img src="....">
pls help thanks
2nd issuei am also facing with my site is when in firefox, when i click to another page "Home" "Company" & "Contact", the browser will auto scroll down and will show the page below the navbar.
In your .fullslider class you have margin-top: 40px;
It'll look like you want it once you remove it.
Please add following css to your style file it will fix your issue
.fullslider {
margin-top: 0px !important;
}
thanks i solved the first issue.
How about the 2nd one. The weird scrolling in firefox, the website will automatically scroll below the nav
I want my navigation bar to be fixed at the top, but when I put the css coding in, all the other buttons on my page stop working.
This is my CSS
#header {
position: fixed;
left: 0;
top: 0;
bottom:200px;
padding:inherit !important;
width: 100%;
z-index:9999;
}
I have tested it and the website works fine when I take this out.
I would assume that the since your layout is fixed and you are using the position properties and z-index that your #header is above everything else and putting an "invisible barrier" between where you click and the buttons underneath all buttons below 200px from the bottom of your screen should be clickable to see for yourself try adding a background color to see what is going on. Removing the top and left positions will help and if possible you might not even need to use the z index property depending on what you are trying to achieve.
I used this blog post (see comments - I can't post more than two links because I am new to SO) to put a sticky (but not fixed) footer on my website.
It had been working everywhere on the website, until I used this blog post (see comments) to display my images on hover. Now the footer floats quite aways above the bottom of the page, but only on the pages with the image hover styles. Here is a broken page, and here is one where it is working.
I am guessing it has to do with the styles for the ul.enlarge span because when I remove those in the Chrome dev tools, the footer pops back into place, although it causes the enlarged hover images to all appear on the page (obviously not what I want).
Is there a way to both get my footer to stay on the bottom of the page (even when the content doesn't reach all the way to the bottom) and still enlarge my images when I hover???? What is causing that giant blank gap at the bottom of the page??
It's because full-sized gallery images on the broken page (hidden far left from the view window) are taking some space, you can fix the footer by changing position of the element containing those images from
ul.enlarge span {
left: -9999px;
position: absolute;
}
to
ul.enlarge span {
left: -9999px;
position: fixed;
}
So those images wont interfere with the rest of the page while 'hidden' as position: fixed; is positioning elements relative to the browser window
You can also check how and why it's broken via changing left value to 0 so u'll know what is happening in the background
edit: As suggested in the comments, you could also fix the page by fixing gallery styling
like that
ul.enlarge span {
display: none;
}
ul.enlarge li:hover span {
display: block;
position: absolute;
left: -20px;
top: -300px;
}
so it wont break your footer in the future
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 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; }