I have been having a tonne of issues with a site I'm developing. Even download to slow page loads and such. But the biggest issue I'm having is the behaviour of fixed position elements.
First of all the nav is supposed to stay fixed at all times, but it doens't. It does however appear in the middle of the page if you reload whilst you are scrolled. Very odd.
Live site here
Second of all the background is supposed to stay fixed yet it does not.
Nav code
<div class="navwrapper">
<nav id="top">
<div class="wrapper">
<ul>
<li>The Project</li>
<li>The Makers</li>
<li>The Markets</li>
<li>The Workshops</li>
<li>The Shop</li>
<li>Get involved</li>
</ul>
</div></nav>
<span class="navshadow"></span>
</div>
CSS
.navwrapper{position:fixed;width: 100%;top: 0;}
There is a bug in Chrome with position fixed and transforms:
https://code.google.com/p/chromium/issues/detail?id=20574
So you will have to remove the transforms from .label.
See also:
Position Fixed Not Working for Header
Related
I'd appreciate any help with this.
I've been through the styles and can't find what is causing this problem; I need to remove the blue shadow element that occurs when hovering over a top navigation menu element. This is only happening for items with sub-menu items and only happen sin Chrome and Safari.
Here's the link to the problem navigation http://www.freedomflooring.co.nz/testing-changes.html
The site is using Zurb Foundation framework.
<nav class="marketing-topbar">
<div class="desktopMenuWrap ">
<ul class="dropdown menu" data-dropdown-menu data-click-open="false">
<li>About
<ul class="submenu menu vertical" data-submenu>
<li>Approach</li>
<li>Finance</li>
</ul>
</li>
</ul>
</div>
</nav>
You are probably looking for outline: 0px; which will remove the "border" when an element is focused. I tested it with Chrome and it works well for me.
See https://developer.mozilla.org/en/docs/Web/CSS/outline for more information on outline.
I'm trying to build a menu with CSS. When the li element has a class of active, I want a triangle (of a specific size) to appear next to the container. Please see the following http://jsfiddle.net/hcabnettek/MeczJ/
As I increase the left property, the arrow goes to the end of the container, but slides behind it. I tried z-index and various other things but I can't seem to figure it out.
Any help would really be appreciated. Thanks all!
<nav>
<ul class="nav main-nav">
<li class="active">
<a href="/home">
<i class="icon-home"></i>
<h6>Home</h6>
<div class="items"></div>
</a>
</li>
</ul>
</nav>
Make the li set to overflow: visible. This should probably fix the problem. If not, also check that the ul, which has a set width, is also set to overflow: visible.
Hoping you can help with my query.
I'm in the process of building a WP blog within a hand coded website and having issues due to the css in WP being complicated.
Here's the page
http://www.carehomesderby.co.uk/news/
I want to span the menu nav and footer the full width of the browser, keeping the content central
I've tried setting the ul width to 3000px (for example) but it adds on about 30px to the RHS. I can't separate the menu nav as it's within the header.php in WP.
Styles are being pulled through for the same element in several places so I'm having difficulty in determining what's what.
Many thanks in advance
I have see your page
For footer if you want it to cover full page then just remove the role from footer tag
<footer id="colophon" style="width:100%;" role="contentinfo">
just remove the contentinfo from the role attribute.
just remove the contentinfo from the role attribute.
For Navigation : you need to couple of thing, I am here giving you an idea
Remove the max-width for site class
.site
{
/*max-width: 68.5714rem;*/
}
remove width 950px value from div tag
<div id="page" class="hfeed site" style="padding-top:0px; margin-top:0px;">
what it will do is, Your navigation and page will acquire entire page then just set content wherever you want other than navigation.
You can try and add:
position:absolute;
left:0px;
on line 1479.
And put the navigation buttons in a new div inside the nav bar. For example:
<div class="nav-menu">
<div class="nav-button">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Facilities</li>
<li>Respite Care</li>
<li>Day Care</li>
<li>Gallery</li>
<li>Events</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
</div>
</div>
and then center the buttons.
I have a vertical menu that needs some sub-menus. I can accomplish a decent-looking one just by putting a ul tag inside the link I want to expand and absolute-positioning it on hover, with display:none when it's inactive. But I'd like to make it slide out, and I haven't had any luck doing so. I have this basic markup:
<aside>
<ul>
<li>Link Text</li>
<li class="more">
Base
<ul>
<li></li>
</ul>
</li>
</aisde>
The aside tag is itself a secondary navigation menu, the main one is in my header. It is position:fixed for easy access while scrolling.
The ul tag inside of <li class="more"> is absolutely positioned, anchored to -1px on the top and width:154px, and on hover it becomes display:block; left:154px (of course, it is display:none when inactive). I have tried transitioning the left property, but it does not change anything, it acts as if my transition weren't even there.
I have used the code below to divide the pages into two halves, 28% and 72%. But the background color set by the wrapper tag should fill 28%; in my case it works fine in Internet Explorer 7.
In Internet Explorer 6, the background color is visible across 100% of the width instead of 28%.
How do I fix this?
My code:
#wrapper{
float:left;
width:28%;
background:#f5f5dc;
}
HTML
<div id="wrapper">
<ul id="testnav">
<li> LOCATIONS
<ul id="subnav">
<li id="content_1">Note </li>
</ul>
</li>
</ul>
</div>
It is an ancient Internet Explorer bug, and it happens only if there is both of complex CSS and complex HTML. For example, in https://drupal.org/node/129014 it happened, too.
What worked me: I specified background-color on both of the parent and the child (in your case, #wrapper), and both DOM nodes also got a zoom: 1.