Basically, the navbar works perfectly, it stays statically stuck to the top of the screen when the user scrolls. When it is text-only, everything works fine. When I want to add the Twitter and Facebook icons, I can simply do so and it will work. However, as soon as I add an <a href="#"> to enclose the image, it breaks completely. Occasionally, the navbar will work even with the image links, but around 90% of the time it will simply fail, the navbar will not appear, and even though Inspect Element reveals that it should be loaded, nothing is shown.
Relevant:
Working HTML
<div class="" id="header">
<ul class="menu">
<li class="menu-item first">Gallery</li>
<li class="menu-item second">Charity</li>
<li class="menu-item third">About Me</li>
<li class="menu-item fourth">Contact</li>
<li class="menu-item media"><img src="TaiwanSite_files/twitter.png" height="25">
<img src="TaiwanSite_files/fb.png" height="25"></li>
<li class="menu-top">
<img src="TaiwanSite_files/top-arrow.svg" height="61" width="61">
</li>
</ul>
</div>
Broken HTML
<div class="" id="header">
<ul class="menu">
<li class="menu-item first">Gallery</li>
<li class="menu-item second">Charity</li>
<li class="menu-item third">About Me</li>
<li class="menu-item fourth">Contact</li>
<li class="menu-item media"><img src="TaiwanSite_files/twitter.png" height="25">
<img src="TaiwanSite_files/fb.png" height="25"></li>
<li class="menu-top">
<img src="TaiwanSite_files/top-arrow.svg" height="61" width="61">
</li>
</ul>
</div>
The relevant CSS:
.menu {
padding:0;margin:0 auto;position:relative;max-width:1024px;height:2.4em;padding-left:62px;padding-right:62px
}
.menu:after {
display:block;content:"";clear:both
}
.menu-logo {
position:absolute;top:.18em;left:0;right:0;text-align:center;z-index:-1
}
.menu-logo img {
width:4.8em;margin:0;padding:0
}
.menu-item {
display:block;float:left;min-width:20%;text-align:right;height:1.2em;margin-top:.58em
}
.menu-item.first {
text-align:left
}
.menu-item.second {
text-align:left
}
.menu-item.third {
text-align:left
}
.menu-item.fourth {
text-align:left
}
.menu-item.media {
float:right;text-align:right
}
.menu-item a {
text-decoration:inherit;font-family:inherit;color:inherit;font-weight:inherit;line-height:inherit;display:none
}
If there is any additional information I can provide at this time, please inform me and I will try my best to do so. Thank you very much in advance for your time and assistance.
Add a special class to your a tags (in this case on):
<a class="on" href="https://twitter.com/">
<img src="TaiwanSite_files/twitter.png" height="25"></a>
<a class="on" href="https://facebook.com/">
<img src="TaiwanSite_files/fb.png" height="25"></a>
Then add this to your styling:
.on {
display: inline-block !important;
}
for the images to display side-by-side, or this:
.on {
display: block !important;
}
for the images to be one on top of the other.
This should help.
Related
I would like to call a a div id function in CSS so that when my mouse hovers over the text it highlights it
<ul class="sub-menu">
<li id="menu-item-1721" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1721">Strategic IT Consulting</li>
is there a way to call this for all sub-menus in the ul class using CSS?
.sub-menu:hover {
color:green
}
.sub-menu li a:hover {
color:green
}
You can use the mark tag around the text
mark:hover {
background-color:green
}
mark
{
background-color:white
}
<ul class="sub-menu">
<li id="menu-item-1721" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1721"><mark>Strategic IT Consulting</mark></li>
Am New to Asp.net and CSS.
I Need to Show Horizontal Menu only image like this
image 1 image 2 image 3 image 4
So I tried like this
CSS
#UlIcon
{
height: 100%;
list-style:list-style-image;
text-align:center;
padding-left: 5px;
}
#UlIcon li { display:inline; width : 100px; height:100%;}
#LiNew
{
list-style-image:url(/IMG/New.png);
}
#LiSave
{
list-style-image:url(/IMG/Save.png);
}
#LiDelete
{
list-style-image:url(/IMG/Delete.png);
}
#LiLog
{
list-style-image:url(/IMG/New.png);
}
#Padding-right {padding-right:15px;}
ASP.NET CODE
<div id="DivMenuRight">
<ul id="UlIcon">
<li id="LiNew"></li>
<li id="LiSave"></li>
<li id="LiDelete"></li>
<li id="LiLog"></li>
</ul>
</div>
But it shows empty. If I Remove display: inline in li css, the image shows vertically in center of the div. What am doing wrong here?
How do I get the solution?
Am using Visual Studio 2008 and CSS2.1
the css list-style-image will place an image next to each point or listed text. it act as an image bullet
I am of the opinion you would like to have this
<div id="DivMenuRight">
<ul id="UlIcon">
<li id="LiNew">
<img src="link1">
</li>
<li id="LiSave">
<img src="link2">
</li>
<li id="LiDelete">
<img src="link3">
</li>
<li id="LiLog">
<img src="link4">
</li>
</ul>
</div>
then you can use css to display all list elements inline-block
example display:inline-block
here is a snippet
img {
display:inline-block;
width:50px;
height:50px;
}
li {
display:inline-block;
}
<div id="DivMenuRight">
<ul id="UlIcon">
<li id="LiNew">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTCjDQxLj9LSCLsCI2iCDEawZVlJ7tlRuBQDHenXo_KaFhdTUiTGw">
</li>
<li id="LiSave">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqyRrA_-5TM0vpRU8BcTPFpGubyzgHGtvE9FQzpnVMPnKnoZwkmQ">
</li>
<li id="LiDelete">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShZ_bYswgHlQLrUn8egsNTTZn5nCmSz1NcFmvtUzujpZhrBflUiQ">
</li>
<li id="LiLog">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTCjDQxLj9LSCLsCI2iCDEawZVlJ7tlRuBQDHenXo_KaFhdTUiTGw">
</li>
</ul>
</div>
Hi guys I am trying to position a search box in my navigation menu of my wordpress site. I have managed to get it displaying in the menu using a plugin called Search Box Navigation. This plugin enables me to style the box to suit my needs.
However this is where I am running into issues.
The code responsible for generating the box located in a plugin file: (I added a class to the li in an effort to control how it would appear on the site...
add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();
$items .= '<li class="menusearch">' . $searchform . '</li>';
return $items;
}
?>
This is my navigation html:
<nav id="access" role="navigation">
<div class="skip-link screen-reader-text">Skip to content</div>
<div class="menu">
<ul id="prime_nav" class="menu"><li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><span>Item 1</span></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8"><span>Item 2</span>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><span>Item 3</span></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><span>Item 4</span></li>
<li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><span>Test</span></li>
<li class="menusearch">
<form method="get" id="searchform" action="http://incomebrokers.tld//">
<input type="text" value="Search"/>
<input type="submit" id="searchsubmit" value="Search" />
</form>
</li>
</ul>
</div>
</nav>
This is my css
#access ul li {
position:relative;
display:block;
float:left;
text-align: center;
width:100px;
white-space: nowrap;
}
/*Menu Search Class*/
.menusearch{
margin-left:500px;
}
any help on how I can position this box to the far right of the navigation but have it adjust when the browser is smaller in size?
I noticed that the same width(100px) is set for each li of the nav.
What about if you edit the css and you add:
#access ul li {
position:relative;
display:block;
float:left;
text-align: center;
width:100px;
white-space: nowrap;
}
#access ul li:last-child {
float:right;
width:300px;
}
http://jsfiddle.net/mBBJM/4537/
You could make it fluid and setting the width in % with a different percentage for the li of the nav that might need it.
HTML :
<nav class="header"> <img src="smiley.gif" class="logo">
<ul class="navigation">
<li id="a" class=""><span></span>A
</li>
<li id="b" class=""><span></span>B
</li>
<li id="account" class="right"> <span></span>Test Test
<ul class="dropdown">
<li>Log out
</li>
</ul>
</li>
</ul>
</nav>
From a previous question I was told to use inline-block to get the list to sit on the same line as the image (logo). however when I make the image the full height of the header it still drops the list down. What am I doing wrong?
JSFiddle
Change in .navigation class position from relative to absolute.
.navigation {
position: absolute;
display: inline-block;
z-index: 1000;
}
fiddle
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.