My problem is the zoom out function in the Chrome. I have no problem with IE, but Chrome makes my menus expand and I dont know why. Probably the pixel values cause this but need for help, thanks.
Look at the menu with black background and the other menu on Chrome and don't forget to zoom out until it is 33% or 25%.
Edit: If I give a value to the "li" element, the menu doesn't expand, but i can't give a value to the "li".
You can look at
<!-- menu -->
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Subscribe</li>
<li>Login</li>
</ul>
</div>
<!-- menu -->
http://jsfiddle.net/2cfaT/1/
Related
There's this fixed header element (a block element), with an absolute positioned nav element with a menu, and another fixed element as the logo:
<header>
<nav id="menu">
<ul id="menuItems">
<li class="menu-item" role="menuitem">About</li>
<li class="menu-item" role="menuitem">Contact</li>
</ul>
</nav>
<div id="topLogo">
<h1>MAIN</h1>
<h2>SUB</h2>
</div>
</header>
The <header> doesn't have dimensions, it doesn't take-up space (check out with an inspector tool).
I need it to take space (and still be fixed).
Look at the JSFiddle to see it with the complete CSS as well:
https://jsfiddle.net/5amo16q8/4/
Changing the nav to float:left and removing the position:absolute seem to create to desired result.
See: https://jsfiddle.net/5amo16q8/8/
I don't want it to dropped below When it becomes a width of Mobile
I want it to be only horizontally
HTML
<div class="nav nav-pills nav-tabs nav-justified">
<li class="active"><a href=''>Home</a></li>
<li>
<a href=''>link</a>
</li>
<li><a href=''>Link 2</a></li>
</div>
Demo
https://jsfiddle.net/mnzsov5z/2/
You can always just override the bootstrap styles with your custom ones. The only thing you would want to do is adding a new class that adds
display: table-cell;
width: 1%;
to the .nav-tabsat>li list element at all resolutions. see updated fiddle:
https://jsfiddle.net/mnzsov5z/3/
It looks like "nav-justified" is not supported by bootstrap anymore. Remove that and let me know if that works.
Anybody have any tips on trying to change the color of the content background on the Icons when you hover over them and the content box shows up.
I just can't seem to inspect the area, because I cant get my mouse to inspect the background because it vanishes once my cursor is actually on it.
Screenshot - http://postimg.org/image/cspn2nxf5/full/
http://techwizdesign.com/cap/homecap/
From what I can see this is being generated in the DOM
<a href="http://techwizdesign.com/cap/contact-us/" class="av-icon-char" style="font-size:100px;line-height:100px;width:100px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" data-avia-icon-tooltip="
<ol>
<li>Contact Us</li>
<li>Get a Quote</li>
<li>Upload a File</li>
</ol>
"></a>
If you look at the closing body tag you'll find this block which the javascript turns on and off - style at will
<div class="avia-tooltip avia-icon-tooltip avia-tt" style="left: 591.1875px; top: 309px; opacity: 0; display: none; "><div class="inner_tooltip">
<ol>
<li>Contact Us</li>
<li>Get a Quote</li>
<li>Upload a File</li>
</ol>
</div><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></div>
I have a dropdown menu that I am using and can't quite get it to work.
<ul id="nav" class="dropdown dropdown-linear dropdown-columnar">
<li>Home</li>
<a href="http://www.example.com/products/index.php"><li class="dir">Products
<ul>
<li class="dir">Buckyballs</li>
<li class="dir">Calico Critters</li>
<li class="dir">Games</li>
<li class="dir">Magnetics</li>
<li class="dir">Playmobil</li>
<li class="dir">Quercetti</li>
</ul>
</li></a>
<li>Calendar</li>
...
</ul>
The menu is white with red text and then changes when I hover over them from red background to white text. However, when I hover over Products, the whole thing goes red when I hover over the li tag, and the text only goes white when I hover over it. But when I hover over what drops down, it's all red again. See the Navigation bar at redballoontoystore.com . Any help?
Add
.dir:hover a {
color: white!important;
}
to your css code. The !important is probably optional if you place the rule in the right place.
I'm pretty sure that if you switch the nesting of list item elements with your anchor tags, this will fix your issue:
<li class="dir">Buckyballs</li>
I am using superfish menu and I am having a problem which I can't figure out although I'm sure the answer is probably obvious and I'm just missing it...
Basically my a elements are not expanding to fill their containing li elements, even though the a elements are set to display:block
Please see example here:
http://www.spiritlevel.co.uk/fpatest/index_hover2.html
css is here:
http://www.spiritlevel.co.uk/fpatest/css/superfish.css
http://www.spiritlevel.co.uk/fpatest/css/superfish-vertical.css
Here's the relevant HTML
<div id="homenav">
<ul id="nav" class="sf-menu sf-vertical">
<li id="company">COMPANY
<ul id="companymenu">
<li id="profilelink">Profile</li>
<li id="activitylink">Activity</li>
<li id="strategylink">Strategy</li>
<li id="teamlink">Team</li>
<li id="financelink">Finance & Governance</li>
</ul>
</li>
<li id="development">DEVELOPMENT
<ul id="developmentmenu">
<li id="partnerslink">Development Partners</li>
<li id="sociallink">Social Responsibility</li>
</ul>
</li>
<li id="projects">PROJECTS</li>
<li id="contact">CONTACT US</li>
</ul>
</div><!--end homenav -->
A second issue I am having is how to get the second level menu to appear in the same place for each first level link. If you hover over company then it's 2nd level nav appears in the right place. But if you hover over development, it appears 1 row too low - i would like it to appear in the same place as the company menu did
Can anyone help me out with this please? thanks
Remove padding-right from .sf-menu a.sf-with-ul (superfish.css line-93) and add width 100% or 140px (home.css line 75) in #nav li a. I've tested it on your site and works fine. Tested in chrome and ff.
The reason your links aren't expanding to fill the box is because they are floated left. Remove that and you should be fine.