Menu
  • HOME
  • TAGS

simple nav left and right alignment

html,css,html5,html-lists,nav

Your markup organization is very good. The reason why your links are being pushed down is because your nav-left is occupying the entire width of the navigation. Here is a JSFiddle: http://jsfiddle.net/fejut75a/2/. Note that you can adjust the padding to what you want. CSS: nav { background: green; padding: 15px;...

Simple slideout nav

nav

STEP 1 Since you're are trying to use a Sidr navigation implementation, and since Sidr is a plugin, and reliant on jQuery you have to make sure to include the jQuery library before the Sidr plugin. In your index.html simply change the order of your script tags. What you have:...

Properly align ribbon

jquery,html,css,nav

I'm not sure if I understand your question correctly... but if you just want to reduce the height of .navbar so that it isn't influenced by any other element on the page, you can simply declare: .navbar {max-height:40px;} ...

How to let the Navigation Bar (and maybe other stuff) end on the right

html,css,nav,navigationbar

You can use calc to reduce 10px from the total width (10px = border-width) But you should try box-sizing:border-box as the browser support for calc is limited Caniuse #nav { height: 60px; font-size: 30px; line-height: 60px; vertical-align: middle; text-align: center; background-color: #0080FF; width: calc(100%-10px); border: 10px solid #16044E; border-radius: 20px;...

Make Element Appear On Minimum Screen Size

javascript,css,media-queries,nav

Now CSS takes precedence over the JavaScript inline styling forcing the nav bar to be visible. @media screen and (min-width: 671px) { .nav { display: block !important; } Why? JavaScript code setting inline styling wins from CSS styling. Or better said always takes priority to CSS rules except when that...

How to find the current nav Li “active” in bootstrap nav

twitter-bootstrap,class,get,nav,active

Using jQuery, you can get it like: var $activeItem = $('.nav .active'); ...

make nav bar in header without absolute position

css,html5,nav

Just FYI: right:0;bottom:0; have no effect if there is no position assigned You have many elements that I am not too sure what they are for. I assume you have more code that you're dealing with on your application. Try this: .container { width: 960px; margin:0 auto; background-color: blue; }...

Android text color selector

android,selector,nav,drawer

You have to use setTextColor(ColorStateList).The normal setTextColor(int) sets the color for all states, as its JavaDoc clearly states: Sets the text color for all the states (normal, selected, focused) to be this color. ...

Bootstrap navbar hamburger is opening but not closing

html,css,twitter-bootstrap,navbar,nav

I would say this is actually an issue with jQuery Toggle. Please ensure jquery is set to toggle "collapsed". One of the ways bootstrap works is by adding/removing classes to buttons/divs/html elements to display them based on css. For example. Pretty Select dropdowns work by adding "open" to a specific...

Jquery Toggle Button image and Div Show/Hide

jquery,css,toggle,nav

use toggle() $("nav").toggle("slow"); $(document).ready(function() { $('#button').click(function() { $(this).toggleClass("down"); $("nav").toggle("slow"); }); }); a { background-image: url(../images/menu_on.gif); cursor: pointer; width: 50px; height: 50px; display: block; } a.down { background-image: url(../images/menu_off.gif); cursor: pointer; width: 50px; height: 50px; display: block; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a id="button"...

Are some new html5 as nav and footer indispensable?

html5,footer,nav

No, they're more like new options that give you more control over the central page element, and so, make it easy to create web pages, nothing more. You can absolutely use HTML5 without using all those new tags. Just create a simple .html file, then add whatever you want. The...

SVG image as :after border without fixed height?

html,css,svg,height,nav

Put your .logo inside ul and you'll need to make some changes to your CSS. Fiddle HTML: <div id="header-wrap" class="group"> <nav> <ul> <li><a href="index.html">ABOUT</a> </li> <li><a href="index.html">OUR CATS</a> </li> <li><a href="index.html">RESERVATIONS</a> </li> <li class="logo"> <a href="index.html"></a> </li> <li><a href="index.html">DONATE</a> </li> <li><a href="index.html">HELP...

CSS nav bar current page color alteration

css,nav

Change this #nav a.selected:link, a.selected:active { to this #nav a.selected:link, a.selected:visited{ FIDDLE You are tried to set active twice....

How to turn a CSS class on and off by clicking a button

jquery,html,css,nav

It seems to be working just fine. Maybe you don't have any styles attached to the showing class so you don't realize it's actually working? $('.handle').on('click', function(){ $('nav ul').toggleClass('showing'); }); ul.showing { background: red; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <nav> <ul class="showing"> <a href="#"></a><li>1</li></a> <a href="#"></a><li>1</li></a> <a...

Unable to change nav menu font color

css,fonts,menu,colors,nav

Apply color on .nav a like this .nav li { display: inline; font-size: 10px; font-weight: bold; padding: 5px 5px; background: white } .nav a { color: red } <div class="nav"> <div class="container-fluid"> <div class="col-md-12"> <ul class="nav nav-pills" > <li><a href="About.htm">ABOUT US</a></li> <li><a href="HoP.htm">HOME of PEACE</a></li> <li><a href="update.htm">NEWS UPDATE</a></li> <li><a href="Pastnews.htm">PREVIOUS...

Magento layered navigation 1column template not appearing

magento,templates,nav,layered

You can simply add the layered nav block like below in catalog_category_default handler catalog.xml of your theme. <catalog_category_default translate="label"> <reference name="content"> <block type="catalog/layer_view" name="catalog.contentnav" template="catalog/layer/view.phtml"/> </reference> </catalog_category_default> After that refresh the cache and check....

Angular UI Bootstrap Respopnsive navbar Dropdown not working Properly in New Version

angularjs,angular-ui-bootstrap,nav

Your dropdown portion has changed. Here's a Plunker <li dropdown> <a href="#" dropdown-toggle>Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">...</a></li> .... </ul> </li> ...

DIV vs NAV tag with CSS Positioning

css,html5,position,nav

As long as I am using one tag, I could just style it using nav { style here } right? I don't necessarily need to use an id for it. Yes and no! Yes, you are right. If there's only one tag, css nav selector is enough to uniquely...

Linking to part of external .html within a DIV

jquery,html,ajax,hyperlink,nav

This function split the target into the page address and target anchor and triggers a scrollTop function after jquery load. Please notice that class name of "menu" and onclick="return false" are added too: <a href="nameofpage.html#link1" class="menu" onclick="return false">link 1</a> <div id="content"></div> <script type="text/javascript"> $(document).ready(function(){ $(".menu").click(function(){ var mytarget=$(this).attr("href"); var myarray=mytarget.split("#"); var...

How to make list items spread evenly within an unordered list (navigation bar)

html,css,list,nav,unordered

Make each item take up a quarter of the list, and center the text: #nav li { float: left; width:25%; text-align:center; } ...

Jquery animate navigation color (SOLVED)

jquery,html,background-color,fade,nav

use this code in your css .nav{ transition-duration: 2s; } DEMO...

Bootstrap @grid-float-breakpoint issues in Safari

css,twitter-bootstrap,safari,responsive-design,nav

Presumably you're referring to http://crbug.com/375574 , which apparently still applies to Safari 8. The solution is to use a somewhat less absurdly-high value for @grid-float-breakpoint. Removing a single digit seems to be sufficient: @media (min-width: 999999999px) { Also, I went ahead and filed a WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=141533...

Float:Right on one list item not working

html,css,nav

You have set for some reason width: 100%; to your LI elements also <br class="clearBoth"/> is not a valid children of UL :) jsBin Modified HTML: <ul class="myNavBar cf"> Your edited CSS with notes: *{padding:0; margin:0;} /* Do you use some CSS reset? */ a{ text-decoration: none; } /* Clearfix...

Can't Position Nav Properly On Bottom Element

html,css,navbar,nav

Check if this works: http://jsfiddle.net/IronFeast/n85Cd/2/ Changed the h4 to div.production, removed the height of the footer and added position:relative...

Bootstrap 3 Horizontal Nav adding anchor

html,css,twitter-bootstrap,nav

I was using links within links, causing this to happen. I have moved the secondary <ul> outside of the anchor tab and its now working.

Vertical black bars in nav buttons

html,nav

Correct your HTML code structure as below. <ul> <li><a href="index.html">Home</a></li> <li><a href="teenfishes.html">Teen Fisherman</a></li> <li><a href="alienfish.html">Alien Fish</a></li> <li><a href="talltale.html">Jean Sot</a></li> </ul> ...

Bootstrap 3 Navbar Not Responsive

html,twitter-bootstrap,responsive-design,nav,responsiveness

You probably didn't set your viewport. Put this in the <head> and see if it makes a difference. <meta name="viewport" content="width=device-width, initial-scale=1"> ...

Auto width for nav li tags

html,css,size,width,nav

Give width in % according to number of your items in list. ul{ list-style-type: none; margin: 0; padding: 0; float:left; width:100%; overflow: hidden; } li { float: left; width:25%; } ...

Scroll down then fixed navigation glitch

javascript,jquery,html,css,nav

Instead of taking the height of header, you should be taking the top of .main_nav to compare with ScrollTop. Change the first line in the code you posted above to: var header_height = $('.main_nav').position().top; That should work. Here is the working fiddle. Hope this helped....

center images with text underneath in a nav

html,css,image,alignment,nav

You should add text-align:center property to your li and replace float:left with display:inline-block .whatwedo li { width: 200px; display:inline-block; list-style: none; text-align:center; } See example here : http://jsfiddle.net/B7sdp/1/...

Once nav bar reached top of window, how to keep it there?

html,css,fixed,nav

A small bit of jquery you can achieve the sticky header. check the DEMO. Here is the jquery code. $(window).scroll(function () { if ($(window).scrollTop() > 280) { $('#nav_bar').addClass('navbar-fixed'); } if ($(window).scrollTop() < 281) { $('#nav_bar').removeClass('navbar-fixed'); } }); ...

Cannot Read Property Style Of Null

javascript,html,css,mobile,nav

Your code should be var nav = document.getElementById("nav"); You have to pass a string to the routine. Your code would not have resulted in an error because the variable was declared in your function, but it would have had no value....

How to center CSS Navigation Menu

css,menu,centering,nav

One way of doing it is by setting the display type of #cssmenu to inline-block and then wrap everything in a container with text-align: center. You also need to set text-align: left on #cssmenu such that the text aligns correctly again. JSFiddle...

Make logo appear to “hang off” nav with bootstrap

html,css,twitter-bootstrap-3,nav

Simply try with this CSS for your logo element : position : absolute; top : 10px; Absolute position will take the element out its container. Check this fiddle...

Nested Nav goes out of its parent anchor element

html,html5,nav

You cannot place an anchor tag inside an anchor tag, even if the nested anchor is contained by an <nav> element. Convention would be to use <ul> tags to nest navigational elements (a list of links). Chrome is just being nice and trying to fix the invalid markup....

Navigation showing in wrong order

navigation,nav

You're setting a float on the li elements which means that whatever the first element is, will always be the first one on the right. Try changing your CSS to this: #header-menu #navigation { text-align: right; } #header-menu #navigation ul { display: inline-block; float: right; } #header-menu #navigation ul li...

CSS not showing on Bootstrap Navbar

html,css,twitter-bootstrap,navbar,nav

Your custom styles style.css should ALWAYS come after Bootstrap styles in page <head>. SIDE NOTE: For performance reasons, you shouldn't use both bootstrap.css and bootstrap.min.css at the same time. You are basically making the client download the styles twice! You should use the minified version on production environments. The same...

Add sequential numbering for wordpress menu (only depth 0)

php,wordpress,menu,nav

If what you are trying to do is number only the top-level menu, you can just test for depth. Change: $item_output .= $args->after . '<span class="navnum">' . str_pad(esc_attr( $item->menu_order ), 2, "0", STR_PAD_LEFT) . '.</span>'; to: $item_output .= $args->after . ($depth == 0 ? '<span class="navnum">' . str_pad(esc_attr( $item->menu_order ),...

Why doesn't this dropdown menu display properly?

html,css,menu,nav

You need to place the subnav inside li and then li:hover > .subnav would work. li:hover > .subnav means you are searching for .subnav under li .subnav { display: none; } li:hover> .subnav { display: block; } <nav> <ul> <li id="active">Menu1</li> <li>Menu2 <ul class="subnav"> <li>Submenu</li> <li>Submenu</li> <li>Submenu</li> </ul> </li> <li>Menu</li>...

How to get element to line up to outer edge of parent element

html,css,nav

I would suggest you to use flex, this article is a good start for flex css. What i did is i wrapped the content into flex-div, namely body-container. then i set the flex-grow of the section to 2, and aside nav to 1. so it will be 1:2:1 ratio <!DOCTYPE...

HTML 5
Centering

html,nav

nav.footer{ margin: 0 auto; } ...

jQuery active menu link to index page is always active

jquery,menu,nav,active

The reason your links in the menu always have an active class is because it's not being removed for inactive links. you can try adding $('.nav li').removeClass('active'); this will first remove the active class and then you can add the active class for the current active link. here's the updated...

Problems with display nav properly

html,css,navigation,nav

Nick, your issue is in the li:first-child selector. Specifically the padding attribute, where it clears the padding, where you're missing the spacing. Many of your :first-child selectors are redundant, and don't need to be re-specified. Mixing position:fixed with float:left is generally not a good idea as your CSS will be...

jQuery Errors for mobile Nav Bar

jquery,css,html5,nav

In your fiddle you did not define toggleMenu. But try in your document <head> the following: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> function toggleMenu() { $('nav ul li a').slideToggle("fast"); } </script> This should fix your problem. Edit Fiddle: http://jsfiddle.net/v723oqfc/2/ (note the "No wrap - in <head>" at Frameworks & Extensions)...

css float issue (nav and article)

html,css,css-float,nav

There are some solutions. One is to use display: table-cell to article: nav { float: left; } nav ul { list-style-type: none; position: relative; left: -20px; display: inline-block; text-align: center; } nav ul li { border: 2px solid #051838; margin: 10px; padding: 1em; font-size: 1em; height: 16px; font-family: Lucida Console;...

jQuery change background-color on click using a variable

javascript,jquery,navbar,nav

Do not remove from other after apply to the active one, but remove from all before: $('nav ul li a').click(function() { $('nav ul li a').removeClass('active'); $(this).addClass('active'); // gets #'' var section_id = $(this).attr('href'); // this is the variable I want to apply to the relevant nav a on click. var...

Hover menu behaving eratically

javascript,menu,hover,nav

I could never get the setTimeout and clearTimeout to work but I did get 99% close using stop The code I used for those who may be looking is: $(document).ready(function($) { $("#mmenu").hide(); $("#main-menu").hover(function() { $("#mmenu").stop(true).slideToggle(500); }); }); The only thing that happens is if the user scrolls quickly over the...

Arranging div with css

html,css,nav

CSS nav { width:30%; //<----Occupying 30% of total width, change it as required float:left; } #charts-wrapper { float:left; width:68%; //<----Occupying 68% of total width and occurs on right of nav, change it as required margin-left:1%; margin-top:10px; } .charts { float: left; width:32%; //<-----Equal area within charts margin-left:0.5%; } Demo Fiddle...

Dynamics NAV Webservice Fails on 2nd Loop

c#,web-services,nav,microsoft-dynamics,navision

I realized that I didn't assign a value to joblinetype in the event that it is not "Billable", so the webservice was unable to Parse the blank string Job_Line_Type = (PurchLines.Job_Line_Type) (Enum.Parse(typeof (PurchLines.Job_Line_Type), joblinetype)), ...

css nav bar menu not working in old ie

html,css,internet-explorer,menu,nav

It is because in your nav you are using gradients, which is not supported in IE8 and IE9. Change the nav to use background and you can use a backup background color for IE: background: #0072A7; background: linear-gradient(bottom, rgb(0,114,167) 0%, rgb(103,176,207) 100%); background: -o-linear-gradient(bottom, rgb(0,114,167) 0%, rgb(103,176,207) 100%); background: -moz-linear-gradient(bottom,...

Vertical submenu dropdown menu with Css/html

html,css,drop-down-menu,nav,submenu

You have to change left value from 210px to 200 or even better use margin-left to count value relative to parent. nav ul { list-style: none; margin: 0; padding: 0px; width: 200px; height: auto; } nav, ul { margin-top: 4px; } nav ul li { border-top: 2px solid #000000; background-color:...

CSS/HTML Trying to center nav ul element

html,css,html-lists,center,nav

Add this ul { padding: 0; margin: 0 auto; text-align:center; } Fiddle...

Is it preferable to select class or
element? [closed]

html,css,nav

Adding a class makes it easier to extend the page later. The class should carry semantic meaning in itself. If you only select elements and then add more elements of the same type later, you'll have to add classes anyway....

Bootstrap / Business Catalyst Broken menu

twitter-bootstrap,menu,twitter-bootstrap-3,nav,business-catalyst

The Bootstrap style and script links that you've added use relative url's, they don't start with for example a http://. This makes your browser use the current url as a starting point when looking for the resource. For example in the head you use <link href="_assets/css/bootstrap.min.css" rel="stylesheet" /> to refer...

Adding transition to a dropdown

html,css,transition,nav

You can try a CSS3 transition, only you would have to use opacity instead of display none. add this li:hover > .subnav { display:inline-block; left:0; -webkit-transition: all 0.4s ease-in; -moz-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; opacity:1.0; } and change the display none to this:...

Bootstrap 3 Affix Header and Menu

html,twitter-bootstrap,nav,affix

After playing around with this for over a week, eventually I decided to wrap all the content that I want to affix in a div, and affix the div. A lot less code, and works like a charm. CSS: #affix1.affix { position: fixed; background-color: #000; width: 100%; top: -10px; left:...

Hide
on click

javascript,jquery,css,hide,nav

This my attempt: make the #nav_expanded_nav always hidden. Then when #nav_hover its clicked change the visibility to visible. When an anchor tag is clicked inside the #nav_expanded_nav change its visibility back to hidden The same happens when the user leaves the #nav_expanded_nav. CSS: #nav_expanded_nav { visibility: hidden; } jQuery: $(document).ready(function()...

Vertical Nav Menu with submeu that expands

html,css,menu,nav,expand

That is an Accordion. Check out jQuery's version here: http://jqueryui.com/accordion/

RDLC Report Merge 2 Rows In 1 Row NAV 2013

dynamic,rdlc,nav

First of all, If rows first column is unique for your data. You should Group On this field in Visual Studio . I couldn't add an image for reputation.. After that, Your line will shown merged. So, values maybe missing. For calculating values effectively, You must use SUM(Field) syntax in...

Broken Nav Links?

html,hyperlink,nav

It's a problem of JavaScript. See the html source code of your FAQ page at line 269 : $('#navigation a, #fixedbar a').on('click', function(e) { e.preventDefault(); }); The preventDefault() function cancel the default event when you click on the link....

I want to make a navigation bar that i can hide and unhide with javascript

javascript,nav

You're using jQuery but haven't included it on the page. Put this in the <head> section of the page to include it: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Also, instead of toggling a class you can just use jQuery's .toggle() like this: <script> $('.handle').on('click', function(){ $('nav ul').toggle(); }); </script> ...

jQuery - change css of links as they move to far left of nav menu on click

javascript,jquery,html,css,nav

Just so i don't leave this question out there not fully answered - I was able to get the desired effect by using your suggestion @Vector and adding a little bit to get the li's back to original look: $('li').click(function() { var $this = $(this); $this.insertBefore($this.siblings(':eq(0)')); $this.toggleClass('active'); $this.siblings().removeClass("active"); $('#blank').hide(); });...

Bootstrap Carousel slides to change after menu closes

jquery,twitter-bootstrap,carousel,nav

What you are looking for requires that the carousel does not slide until your collapse element has finished hiding. I do not recommend using timer or a delay - instead, make use of bootstrap events to coordinate the hiding and animation of your bootstrap elements. In your carousel's 'slide.bs.carousel' event...

Jquery display all subnav of parent

jquery,slide,nav

Try to do something like function initMenu() { jQuery('.nav-child').hide(); // Start with nav-childs hidden jQuery('.nav > li.parent a').click(function() { var checkElement = jQuery(this).next(); var $uls = $(this).next().find('.nav-child').addBack().slideToggle(160, 'linear'); $uls.prev('a').toggleClass('active'); $(this).parent().siblings().find('.nav-child').slideUp(160, 'linear').prev().removeClass('active') }); } // End initMenu() initMenu(); <script...

Modifying email templates for Navision 5.0

email,templates,nav,navision

Do you mean the mails that are sent on the event of sales order approval / rejection or that small 'New Mail Message' button in the Customer card? Libraries that are used in these cases are different, and they rely on different automation objects to create e-mail messages. Anyway, in...

wp-bootstrap-navwalker breakpoint change

php,css,wordpress,twitter-bootstrap,nav

The breakpoint itself is baked into Bootstrap 3, not wp-bootstrap-navwalker.php. You can update the breakpoints your self at the following URL: http://getbootstrap.com/customize/#media-queries-breakpoints Or override them in your bootstrap.css file....

change subnav active link styling in squarespace

html,css,hyperlink,nav,active

You just need to move the color off of the li and on to the anchor tag like so: .active-link a { color: #c6d4d0; border-bottom: 1px solid #c6d4d0; } you can see a jsfiddle of it working here:https://jsfiddle.net/24k1zep4/3/ your CSS is really specific, if you can't change that you may...

How do I make a Flat Design Menu bar?

html,css,html5,menu,nav

Working DEMO <div class="wrapper"> <header> <h1>Colve</h1> <!-- remove the </div> present here --> <nav> <ul class="menu1"> <li><a class="button" href="#">Home</a></li> <li><a class="button" href="#about">About</a></li> <li><a class="button" href="#downloads">Downloads</a> <li><a class="button" href="invasion.html">INVASION</a></li> </li><li><a class="button"...

Horizontal Nav with Overhanging Logo

html,css,responsive-design,nav

These two blocks for #nav li and #nav a should roughly achieve your desired result: #nav li { list-style: none; vertical-align:top; display:inline-block; } #nav a { color: #3297FD; display: block; font-family:arial; text-transform: uppercase; font-weight: bold; margin-top:52px; padding: 9px 18px 9px; text-decoration: none; } Basically declaring vertical-align:top; to all list items...

Is It Practical To Use Nav?

html,html5,nav

Depends what browsers you need to support but seems relatively well supported from IE9 and FF4; http://dev.w3.org/html5/spec-preview/the-nav-element.html http://www.w3schools.com/tags/tag_nav.asp I can only suggest you try it and test on your target browsers. If for some reason you do end up using a div make sure you add role="navigation" <div id="nav" role="navigation">...

Horizontal nav with multiline items and vertical alignment

css,hyperlink,vertical-alignment,multiline,nav

full disclosure: I don't typically use this technique, but if you think that sometimes links will wrap, this is a pretty easy solution. Also, this does not work in ie7 and below Every frontend developer will tell you that using tables for non-tabular data is a no-no, but using table...

html

html,wordpress,nav

In theme functions.php file add this below: function register_header_menu() { register_nav_menu('header-menu',__( 'Header Menu' )); } add_action( 'init', 'register_header_menu' ); Then paste this part below where you want the navigation to be in the template I'm guess the header.php <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?> Add links inside...

Mob Nav Disappears After Window Resize

jquery,css,navigation,nav

As Carlos Mateo has already mentioned, your CSS does not have enough specificity to overcome the inline style added by jQuery. jQuery hides the navigation by adding an inline style directly to the element; your CSS applies shows the navigation by using an ID selector. Referencing the CSS specificity chart...

How to style each list item background of the wordpress navigation seperately

wordpress,navigation,styling,nav

It sounds like you want different active states for each individual link. .current-menu-item captures the active link, but doesn't offer customization for each individual link. I think you can use a combination of nth-child and .current-menu-item. Do you know where .current-menu-item gets applied? If it's on the <li>, this should...

How to remove gap between navigation and the header? Also between navigation and main content?

header,space,nav

Change margin-top: 5px; to margin-top: 0; in .nav .nav-container. .nav .nav-container{ width: 960px; height: 62px; margin: auto; /* margin-top: 5px; becomes */ margin-top: 0; } Demo: http://jsfiddle.net/ue65t3gh/...

Responsive Megamenu issue

html5,css3,nav,megamenu

Doesn't this work? Add this in the end of your CSS. #nav ul.subs {width: 100%;} It worked for me! :) Or if I understood wrong, you want the mega menu to start from the menu's left position. If that's the case, you need to position the menu links as relative...

Hover Disabled after Waypoint Event

jquery,css,hover,nav,jquery-waypoints

This could be one of CSS Specificity issue. Just decorate with !important. This should resolve issue: .menu:hover { background: url("http://www.solidbackgrounds.com/images/two/950x350/950x350-vegas-gold-venetian-red-two-color-background.jpg") 0 100%!important; color: #00a4f0!important; } ...

Navigation Bar - LI:HOVER Full Height

html,css,nav,navigationbar

The background color is applying to only the text background because you're using display: inline; Any background give to inline element will apply to its content only, different from block element that will apply to the entire element. The easiest solution is to change your display to inline-block like this:...

Please identify this output format [closed]

android,web-services,nav

Looks like that is just the string description for the object, which is a result of you using result.toString(); This might be of some help for learning how to parse the result correctly. For example, you can get the first property of the object like so: SoapObject result = (SoapObject)...

jQuery multilevel submenu

jquery,menu,nav,multi-level

Use .removeClass() to remove already open ul $(document).ready(function() { // Toggle Sub Nav $("#nav li:has(ul)").children("ul").hide(); // hide the li UL $("#nav li:has(ul)").find("a").click(function() { var parent = $(this).parent() parent.siblings().find("ul.show-subnav").removeClass("show-subnav"); parent.find("ul:first").toggleClass("show-subnav"); }); }); $(document).ready(function() { // Toggle Sub Nav $("#nav li:has(ul)").children("ul").hide(); // hide the li UL $("#nav li:has(ul)").find("a").click(function() { // Add .show-subnav...

How to align navbar to center with css

html,css,css3,nav

One way would be to set the display of #nav ul to inline-block. Then add text-align: center to the parent element in order to center the child ul: Example Here #nav { position: absolute; left: 0px; height: 40px; background-color: #2C64B4; width: 100%; text-align: center; } #nav ul { margin: 0;...

HTML navigation bar with unordered list vs other methods [closed]

html,css,html5,css3,nav

Personally, I've used all three at the same time! Depends on you're goal, when I use ul it is usually to make a type of drop down menu pure in css. <a href="#">Menu1</a> <ul> <li><a href="#"><img alt="duck1" src="duck1.jpg"></a></li> <li><a href="#"><img alt="duck2" src="duck2.jpg"></a></li> <li><a href="#"><img alt="duck3" src="duck3.jpg"></a></li> </ul> CSS ul >...

Navigation Bar - Li Hover - Click On Link

html,css,navbar,nav,navigationbar

As said before your HTML tags <a> and <li> are wrongly placed. But for your first problem, you just have to add display: inline-block; to your a selector. btw, remove the padding from the li and add it to your a. You cannot wrapp li tags with other tags. li...

Impossible CSS nav menu layout?

css,css3,menu,nav,submenu

I managed to make it work using a pseudo absolute element before the sub ul. Keep the submenu at 60px top, so it will place correctly, and set the pseudo to -10px top, so it will fill the created gap: Updated CodePen nav ul ul:before { display: block; height: 10px;...

How to revert nav menu to unordered list view when resizing window?

css,google-chrome,firefox,nav

What you are trying to do is a responsive page. That is also called the 'mobile first grid system' because you make it fit the small screen first, then you only add new elements to the classes in media queries as you move to bigger screens. This should get you...

Removing whitespace from end of navbar

css,css3,navbar,nav

It is a block element, so it has width 100% by default, set it to display: inline-block; and it should be fine. http://jsfiddle.net/95g12kpe/1/...

position:relative; of navbar seems to be stopping body from showing

html,css,nav

You misspelled the position #tag { postion:absolute; // it should be position } ...

Semantic markup of navigation and search area

html5,nav,semantic-markup

My first problem is whether I should wrap the whole thing inside nav tags or just the browse part... Looking at the definition of the nav element in the HTML5 spec The nav element represents a section of a page that links to other pages or to parts within...