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;...
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:...
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;} ...
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;...
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...
twitter-bootstrap,class,get,nav,active
Using jQuery, you can get it like: var $activeItem = $('.nav .active'); ...
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; }...
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. ...
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...
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"...
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...
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...
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....
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...
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...
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....
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> ...
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...
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...
jquery,html,background-color,fade,nav
use this code in your css .nav{ transition-duration: 2s; } DEMO...
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...
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...
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...
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.
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> ...
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"> ...
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....
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/...
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'); } }); ...
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....
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...
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...
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....
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...
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...
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 ),...
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>...
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...
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...
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...
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)...
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;...
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...
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...
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...
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)), ...
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,...
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:...
html,css,html-lists,center,nav
Add this ul { padding: 0; margin: 0 auto; text-align:center; } Fiddle...
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....
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...
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:...
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:...
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()...
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...
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....
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> ...
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(); });...
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...
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...
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...
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....
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...
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"...
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...
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">...
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...
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...
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...
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...
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/...
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...
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; } ...
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:...
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)...
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...
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;...
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 >...
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...
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;...
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...
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/...
You misspelled the position #tag { postion:absolute; // it should be position } ...
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...