What is the problem with this code below..
everything is working except menu drop down.
<div class="navbar">
<div class="navbar-inner" >
<div class="container">
<ul class="nav">
<li class="dropdown">
Services <b class="caret"></b>
<ul class="dropdown-menu">
<li>Web Design</li>
<li>Web development</li>
<li>Wordpress Theme development</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li > Hello, <?php echo "Admin"; ?> </li>
</ul>
</div>
</div>
You are missing a at the bottom. Otherwise everything seems to be fine.
Related
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<li>Home</li>
<li>About us</li>
<li class="active">Projects</li>
<li>Testimonials</li>
<li>Contacts</li>
</a>
</li>
</ul>
Hey there, I have this navbar code on my HTML project. However, when i insert my .html into validator.w3.org, i get the issue. Can someone please help me check? I'm pretty sure I closed it already..
You have to wrap those li tags inside anchor tag with ul.
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<ul>
<li>Home</li>
<li>About us</li>
<li class="active">Projects</li>
<li>Testimonials</li>
<li>Contacts</li>
</ul>
</a>
</li>
</ul>
this will solve first warning in validator.
I have created a navigation menu at my Home Page's header. I've set up the links in the navigation, but I want the links to be opened in a new tab. How can I achieve that?
<div class="sticky-nav">
<nav id="menu">
<ul id="menu-nav">
<li class="current">Home</li>
<li>About Us</li>
<li>Contact us</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Manicures and Pedicures</li>
<li>Hair</li>
<li>Make Up</li>
<li>Hair Removal</li>
<li>Skincare</li>
<li>Hamam Maghrabi</li>
</ul>
</li>
</ul>
</nav>
</div>
More about a-target attribute at: W3Schools
Use: <a href="#" target="_blank".
<div class="sticky-nav">
<nav id="menu">
<ul id="menu-nav">
<li class="current">Home</li>
<li>About Us</li>
<li>Contact us</li>
<li class="dropdown"><a class="dropdown-toggle" target="_blank" data-toggle="dropdown" href="#">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Manicures and Pedicures</li>
<li>Hair</li>
<li>Make Up</li>
<li>Hair Removal</li>
<li>Skincare</li>
<li>Hamam Maghrabi</li>
</ul>
</li>
</ul>
</nav>
</div>
Use target="_blank" in all your anchor tag
DEMO
I'm using Bootstrap 3 to create a menu. Simple run of the mill html/css stuff.
Having problems when on the iPad - some of the links don't work.
The dropdown menu is working fine - as are all the links within - which seems strange. There's a "scroll-to" function on the list - might be the problem but it's not affecting the dropdown? Sort of stumped.
Thanks in advance.
Can be seen here.
http://www.lapthelough.org/index.php/lap10
<div class="navbar-collapse collapse">
<ul id="scrolling" class="nav nav-pills">
<li class="active menubadge float shadow" >Home</li>
<li>event</li>
<li>route</li>
<li>start</li>
<li>safety</li>
<li>partner</li>
<li>fundraise</li>
<li>register</li>
<!-- dropdown in main menu "DROPNAV"-->
<li class="dropdown">
… <span class="caret"></span>
<ul class="dropdown-menu">
<li>Training</li>
<li>FAQs</li>
<li>Blog</li>
<li>Forum</li>
<li class="divider"></li>
<li class="dropdown-header">Social</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</li>
</ul>
</div>
I am having a little problem with the navigation list items going a little below the top-bar when I resize the browser. When I remove the image it seems to be working perfectly fine on all screen resolutions but inserting the logo has had an affect on this. Is there any way I can solve this. Can't seem to find out what the problem is.
HTML:
<!-- HEADER START -->
<div id="header">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
<a href="index.html"><img src="img/flogo.svg" class="logo" alt="Logo">
Sharp <span>Media </span>
</a>
</h1>
</li>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
<li>Home</li>
<ul class="dropdown">
</ul>
</li>
<li class="divider"></li>
<li>FAQs</li>
<li class="divider"></li>
<li class="has-dropdown">
<li>Contact Us</li>
<ul class="dropdown">
<li class="divider"></li>
</ul>
</li>
</ul>
</section>
</nav>
I have a list as follows:
<ul id="menu">
<li>Home</li>
<li>Work
<ul>
<li>CSS Development</li>
<li>Graphic Design</li>
<li>Development Tools</li>
<li>Web Design</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
<li>Feedback</li>
</ul>
I am attaching an image of so far what I have done.
In this menu, I want to align feedback to the right side.
How can I do it?
Add this to your CSS content.
li:last-child will select the last li of the menu list.
Demo
#menu > li:last-child
{
float:right;
}
Just use float: right;:
<ul id="menu">
<li>Home</li>
<li>Work
<ul>
<li>CSS Development</li>
<li>Graphic Design</li>
<li>Development Tools</li>
<li>Web Design</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
<li style="float: right;">Feedback</li>
</ul>
You can check the demo here.
Aside from float you can also use position:absolute inside of a position:relative container. (Inline CSS for example purposes only.)
<ul id="menu" style="position:relative;width:1008px;height:40px;display:block;">
<li class="right" style="position:absolute;right:20px;">
Feedback</li>
I had the same question but for the whole list.
Float does not realy work there, so here is what worked for me:
ul{
direction:rtl;
}
This way all your li elements including their ::marker's will be pulled to the right of the parent container.
You can also combine this with selectors to just move single li elements.
ul:first-child,
ul:nth-child(2),
ul:last-child{
direction:rtl;
}
This will pull the entire menu to the right and have the dropdown sub menu pull right also instead of displaying off the screen.
<div class="top-menu">
<ul class="nav navbar-nav pull-right"><li class="dropdown dropdown-user">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-settings"></i>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="page_user_profile_1.html">
<i class="icon-user"></i> My Profile
</a>
</li>
</ul>
</li>
</ul>
</div>