Questions tagged [nav]

The `<nav>` element is new HTML5 element which defines a section of navigation links.

nav
898 questions with no upvoted or accepted answers
Filter by
Sorted by
Tagged with
7 votes
1 answer
1k views

Can the HTML5 <nav> element be used to group links that filter or reorder main content?

Our site has two primary navigation links to two completely different pages. Something like this: <section> <header> <nav> <ul> <li&...
Dennis Plucinik's user avatar
5 votes
0 answers
4k views

Ionic 2 update [rootParams] Tabs

This is closely related to the SO question Ionic 2 passing tabs NavParams to tab I have tabs view template setup as: <ion-tabs #myTabs> <ion-tab [root]="tab1Root" tabTitle="Home" ...
Mukus's user avatar
  • 4,959
3 votes
0 answers
316 views

is it possible to customize django 3 admin nav_sidebar menu as a custom group?

I'd like to customize the built-in django admin 3 nav left sidebar with my own caption and models list. The default nav_sidebar is: myapp A - model A.1 - model A.2 myapp B - model B.1 - model B.2 ...
esduren's user avatar
  • 33
3 votes
0 answers
1k views

aaSquarespace Marquee template: how to force mobile menu instead of desktop nav

I was able to force the desktop view to use the mobile "burger" menu for Squarespace templates like Hayden with this simple bit of CSS, but it doesn't work for Marquee. #header #mainNavWrapper { ...
Chris's user avatar
  • 167
3 votes
0 answers
1k views

How to center absolute dynamic width ul submenu?

I found a lot of posts about centering submenu <ul> absolute positioned, but none of them solved the problem of center the submenu that have dynamic width determined by the text length of the &...
neoDev's user avatar
  • 2,999
3 votes
1 answer
548 views

Center contents of NavBar - BootStrap

I am trying to center the contents of the Nav Bar however, I cannot get it work properly I think everything seems to be more left aligned than center but i havent used float:left anywhere I am ...
RandomMath's user avatar
3 votes
2 answers
4k views

@grid-float-breakpoint: @screen-desktop; not working in bootstrap 3

I'm trying to adjust my nav in bootstrap so that it collapses at 992px instead of 768px. I'm perplexed as to why @grid-float-breakpoint: @screen-desktop; won't work. I've used it before in other ...
London804's user avatar
  • 1,112
3 votes
4 answers
154 views

Final list item in horizontal menu sits below the rest

I am so ready to be done with this website, but I'm stuck on a couple things, one of which has me COMPLETELY stumped. I'm working with Dreamweaver CS6, but I am horrible with Adobe software in general ...
Lady P's user avatar
  • 31
3 votes
0 answers
225 views

nav-tab issue in bootstrap across different browsers

I am currently having an issue with the nav-tab in bootstrap. I have set up the CSS so that the active tab is a green color. When it is hovered, it turns into a brown color. When a user were to ...
user2390740's user avatar
3 votes
4 answers
1k views

Center multiple divs inside a nav

I was creating my own site and I wanted to have this navigation menu on top, which contain 4 divs with each another link to another place on the website, but I cant figure out to get them in the ...
Joinho's user avatar
  • 31
2 votes
1 answer
84 views

Move the elements to the left and right side CSS

this is the codes that demonstrate my issue function Nav(f) { var x = document.getElementById("myNav"); if (x.className === "nav") { x.className += " responsive"; } else { x....
Brian Serrano's user avatar
2 votes
0 answers
219 views

Fixed navbar at the bottom and justify-content: space-between

i'm trying to make a nav bar at the end of a div, but the problem i have is that when i put position: fixed at it's parent, the justify.content: space-between disappear. This is the code I have: &...
kelyjane's user avatar
2 votes
0 answers
119 views

Navbar that collapses once link selected (Jquery)

I'm trying to teach myself how to make a responsive collapsible navbar. I've managed to get the navbar to collapse when below a certain width and open down when the hamburger menu is clicked, but I'm ...
user avatar
2 votes
1 answer
2k views

how to change navigation link active class on scroll in 'React' or how to change the window.loaction.hash on scroll in react

I am using react, I am building a single page application and I don't want to use react-router I just have one page and sections , and a hash for each section (or component in react ) , I want the ...
Joe Barbaro's user avatar
2 votes
0 answers
924 views

Angular / Bootstrap: collapse nav togglemenu when clicking outside

I am new to Angular and I try to close my navigation toggle menu when I click outside of the dropdown. I try to do this with the ng-click-outside directive, but for some reason it does not work. At ...
AtMakeIT's user avatar
2 votes
2 answers
625 views

nav bar w/burger menu as open / close button

New to coding. Having trouble with side nav bar with animated burger menu. Nav Bar opens and closes on on-click(of the animated burger), but it always pushes back to landing section. If I open nav ...
marcelap99's user avatar
2 votes
2 answers
103 views

Have trouble making my drop down menu appear when going into mobile mode

Whenever I click on the dropdown bar nothing appears and I see a notification that says javascript: void(0). I tried taking that out of the code and it still does not do anything. function ...
keisha1514's user avatar
2 votes
1 answer
140 views

How to add javascript on wordpress nav menu

On a wordpress mega menu, I want to show the product image on a different div when the mouse hovering a link. I work with the ubermenu plugin I find a html+javascript code that work fine, but only ...
SebDfea's user avatar
  • 21
2 votes
1 answer
407 views

Stencil: <ion-nav> inside <ion-pane-split> don't work properly

these are my stencil and ionic version "dependencies": { "@ionic/core": "one" }, "devDependencies": { "@stencil/core": "1.0.0-beta.8" } I'm trying to use the <ion-menu> inside a &...
JEricaM's user avatar
  • 814
2 votes
0 answers
335 views

Getting scroll position for javascript show hide Nav

I am using some stock javascript to hide a Nav when scrolling down and show again when scrolling up. It works perfectly except for Safari mobile. When the page is scrolled down then dragged up past ...
TheBamBam's user avatar
2 votes
1 answer
39 views

Gap between heading and navigation

Beginner here. I'm trying to figure out how to put 5 elements on my nav bar. First element is heading and the other for are li's. Hopefully someone can help! I want to get the following result: ...
Davis's user avatar
  • 21
2 votes
0 answers
3k views

WP Bootstrap menu dropdown menu on hover

My Wordpress (bootstrap) nav menu is added as follows: <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => '...
Wasteland's user avatar
  • 5,109
2 votes
1 answer
180 views

HTML navbar with two image hyperlinks

I've been trying to create a responsive navbar with just two images (which are hyperlinks and transparent) and I can't seem to get the formatting right. The way I want it to look is: First image: ...
mjm2z's user avatar
  • 31
2 votes
0 answers
143 views

What does progressAnimation,ev and C minClickBlockDuration in the parameter ionic3 in navOption?

I don't know what NavOptions' progressAnimation, minClickBlockDuration and ev do when I am using this.navCtrl.push (page: Page | string, params? Any, opts? NavOptions, done? Function) in ionic3
Peter's user avatar
  • 21
2 votes
1 answer
4k views

How can i put a glyphicon in nav with bootstrap?

I want do a nav like this: Logo::::::::|:::::Dropdown+Search(center):::::|::::::::::Glyphcon1Glyphcon2| In this moment I make this, but the glyphcon show it down of nav content. <nav class="...
Ati Que Timporta's user avatar
2 votes
0 answers
428 views

Wordpress Display Current page and parent/children

I'm trying to create a sidebar navigation that has the current page and it's children displayed (or if it's the child page, it's siblings and the parent page) I can only get the children or, when on ...
creativepearson's user avatar
2 votes
1 answer
806 views

Foundation 6 - Use CSS to arrange Header image and Nav properly

I am using Foundation 6 to try to create a header image which overlaps part of a navigation bar. It uses the .row class as a responsive div. HTML <header class="row text-center"> <a href="...
user3545752's user avatar
2 votes
0 answers
485 views

Bootstrap Fixed Navbar Not Sticking to Top in Mobile Browser

I'm working on a website and have noticed that the navbar does not work properly in mobile browsers, specifically chrome. This happens when I scroll down quickly: Fixed navbar bug If you cant see ...
Jake Urban's user avatar
2 votes
1 answer
63 views

Nav menu won't show

I can't get my nav menu to show anything but the gray header (no 3 lines for the menu)... I know it's obvious but I don't see my mistake. <header> <nav class="navbar navbar-default"> ...
Julia's user avatar
  • 21
2 votes
0 answers
57 views

Hiding Nav on Scroll and reavaling it on logo hover?

I m developing a site and I m about to add a little bit of transition to the nav bar, but I have few bugs can anybody help. The Objective is when you scroll down the nav elements gets hidden and the ...
Pradeep's user avatar
  • 57
2 votes
0 answers
130 views

Why Jquery will work for link outside navbar but not inside?

I have downloaded a JQuery plugin nav bar, this one http://jpanelmenu.com/ and in my code i have added link that will bring up some html to a in the page without refreshing the whole page.I want to ...
AnonymousAlias's user avatar
2 votes
1 answer
207 views

CSS bottom-border property works when defined for element name but not class name

For some odd reason, bottom-border works when I set the property to the "li" element, not for the defined "class" name (li-navclass). This presents a problem because I don't want the bottom border to ...
Paul's user avatar
  • 21
2 votes
0 answers
255 views

Adding border-bottom to nav and vertical align menu items

I have a navigation that worked fine when i didn't use any custom bottom border on the nav links, but trying to adding them and still have the functionality as before does my head in. I just want to ...
KP83's user avatar
  • 636
2 votes
1 answer
600 views

Dropdown CSS and HTML Navigation Menu doesn't work in IE6 - IE8

I have created a CSS and HTML navigation menu that works in all browsers except IE6 - IE8. How can I make this work? I've attempted to make my css and html as small as possible to help with the ...
Seudonym's user avatar
  • 552
2 votes
1 answer
304 views

.show and .animate at the same time?

I have a nav which you can see here: http://hutchcreative.co.uk/rod/. If you click on the menu icon and then contact you can see the icon changes to a X. I would like to add an animation on this, ...
probablybest's user avatar
  • 1,445
2 votes
2 answers
157 views

Magento #nav with RGBA issue

So I'm trying to add an RBBa background color to my navigation, however it gets pushed back behind an element if its not a solid color. Why is this? The markup is all correct and you can view the ...
Daron Spence's user avatar
  • 1,583
2 votes
1 answer
546 views

Twitter bootstrap dropdown active nav creating a white area and looks strange

I've looked at this for a number of hours now and can't figure out what is going on. Any help would be much appreciated thank you. It is a very strange problem and rather than going into detail I ...
user2215992's user avatar
2 votes
1 answer
496 views

drop down menu in html5

i have the following code which has navigation, i want to add sub menu/drop down to them. (say a drop down from categories). how should i implement that? please help <nav> <div class="...
user1882758's user avatar
2 votes
1 answer
635 views

Select drop down menu for nav on collapse

I’m not a fan of the collapsed 3 line nav button when bootstrap collapses for smaller viewports. Is there a way to get the navbar collapse to a select drop down menu, as well as place it somewhere ...
devhead's user avatar
  • 197
2 votes
0 answers
312 views

jquery - nav home image fades in on mouseout between hovering over every nav image

If for instance I hover over the contact_text image and then the about_text image, rather than the contact_text image fading out and the about_text image fading in instantly, the home_text image fades ...
user1814798's user avatar
2 votes
1 answer
252 views

on iphone - jquery to open/close nested nav

I'm building a mobile website that has a nested nav at the top. I want the sub-nav to pop up when the user taps on its parent li. Here's my trouble: I need it to close when anything otuside of the sub-...
Mary Pelletier's user avatar
2 votes
3 answers
2k views

What elements are permitted to be nested inside the <nav> element for html5?

What elements can the HTML 5 <nav> element contain?
dew's user avatar
  • 29
2 votes
1 answer
1k views

Bootstrap nav-justified not working in IE 8,9. They are stacking instead of aligning next to each other

I have some issue with the nav menu of my website against the IE (again). Here I am trying to use Twitter's bootstrap to set up a menu bar for my website. Each of these items are supposed to align ...
Kann's user avatar
  • 385
1 vote
1 answer
63 views

Change class of Parent Component from Child Component

Dashboard.html <nav #nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <button class="nav-link active" id="nav-...
coder's user avatar
  • 13.2k
1 vote
0 answers
33 views

React Algolia how to get searchbar in nav and result in body?

I have this react algolia component which works const AlgoliaSearchBar = ({ instantSearchParams, className }) => { const { instantSearchProps } = instantSearchParams || {}; return ( &...
Frederik Nielsen's user avatar
1 vote
0 answers
43 views

Styling and interface problems with a bootstrap search site

Over the past couple of days, I have been trying to program a search interface for a website using bootstrap, php, html, css and js. I have made a functioning top bar that is collapsible on mobile, ...
user21537823's user avatar
1 vote
0 answers
63 views

Bootstrap navbar col are stacking horizontally instead of vertically in desktop but stacking vertically in mobile

I'm just using a basic bootstrap theme https://startbootstrap.com/previews/creative bootstrap link items mobile expanded bootstrap link items mobile desktop basic icons desktop contact link items ...
MNK's user avatar
  • 11
1 vote
0 answers
60 views

Some images not loading on github pages after deploying. React

Hi I deployed a new react app to ghpages. One of the pages has a Tab Container with 3 Nav Items that serve as a link. The first tab which auto loads with the page shows all the images correctly. The ...
Jellychews's user avatar
1 vote
1 answer
81 views

How to make flex-end and flex-start for .logo and div?

I am trying to move #nav-bar elements to the right but it's not working. I want to put .logo to the left using flex-start but I don't think that's working. I think it's on the left by default. I am ...
layancodes's user avatar
1 vote
0 answers
65 views

Bootstrap v4.1.3 Navbar (Hamburger) not working in Mobile View as well as dropdowns

I'm migrating one bootstrap HTML website to react, I'm facing an issue in navbar & dropdowns as navbar is not working in mobile view & getting the following Error. Uncaught TypeError: Cannot ...
Mohammed Arham Khan's user avatar

1
2 3 4 5
18