Search the Community

Here's my code: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar" id="myNavbar"> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/home.htm">Home</a> <a href="https://www...">Store</a> <a href="https://www.ups.com/track?loc=en_US&requester=ST/">Track Your Package</a> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/aboutme.htm">About Me</a> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/artclub.htm">Andrew's Art Club</a> <div class="dropdown"> <button class="dropbtn">Need to Know <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/returns.htm">Returns</a> <a href="#">Shipping Claims</a> <a href="#">Terms of Service</a> <a href="#">Privacy Policy</a> <a href="https://www...">Help Center</a> </div> </div> <a href="#">Deals</a> <a href="https://www...">Sign-in</a> <div class="dropdown"> <button class="dropbtn">Languages <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">English 🇺🇸/🇬🇧</a> <a href="https://www...">Español 🇪🇸/🇲🇽</a> <a href="https://www...">Français 🇫🇷/🇨🇦</a> <a href="https://www...">Русский 🇷🇺 </a> <a href="https://www...">Italiano 🇮🇹</a> <a href="https://www...">Deutsche 🇩🇪</a> <a href="https://www...">中国人 🇨🇳/🇹🇼/🇭🇰</a> <a href="https://www...">Português 🇵🇹/🇧🇷</a> </div> </div> </div> </div> </nav> I was super excited that the navbar works now, only to be crushed when the dropdowns stopped working. Any suggestions?

Hi I am in the process of replacing an old menu on a website and came across the W3Schools menu guides. I have recreated most of the menu using the example and code on the 'Drop down menu in NavBar' page (https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp) and I am really pleased with how it is coming along. However, my HTML and CSS skills are quite limited and I am stuck on two things that I am hoping someone here can help me with. I have done a few searches on these forums but not found quite what I am looking for or something that fits with what I have done so far and I cannot see an example on this site that achieves what I am trying to do. I need to add some sub-menus to the drop down items. For example, in the code given on the above page, the 'Dropdown' menu has three items, Link 1, Link 2 and Link 3. I need to find out how to have Link 1 (for example) provide access to another list of items, e.g. Link 1a, Link 1b, Link 1c etc.. Ideally, I would like this sub-menu to appear to the right of the source item. This also leads the second thing I have not been able to work out, but I think is probably a lot simpler. On the menu item that links to a sub-menu, I would like to put a right-arrow to show that a sub-menu is available. Whilst I can put the arrow on the item, I have not yet worked out how to right-align the arrow so, at the moment, it appears immediately after the menu item name. I have seen mention on some forum posts about li items and child-items but this appears to relate to different types of code for the menu in general and not what I have used so far. If it isn't possible to do this using the current method, I am happy to change to something else and any pointers, or links to example code would be much appreciated. Thanks in advance for any help anyone can offer. David

I'm trying to set up a template for a website, with a responsive top border with dropdowns in the navigation bar. I thought I had it all working at one time, but have gone back to previous files to no avail. The menu is responsive, and goes down into a hamburger icon, but clicking on the hamburger icon does nothing. I'm trying to do this without using too many external files. I think the problem must be in the javascript function combined with the media queries, but I haven't been able to see the problem. I used the W3Schools responsive navbar with dropdowns, from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown as a basis for this. The files I have are index.htm, a top border file, top.htm in the folder _borders, and 2 css files in a css folder: mystyles.css and topnav.css. This is the basic code from index.htm. I excluded site-identifying code and content. I've attached the other 3 files - didn't know how to paste them here separately. In the top.htm and index.htm I've commented out references to the mystyles.css file and it doesn't make any difference. I'm using Brackets for this, and using Live Preview. If I just open the index file directly in Chrome or Firefox, there is no formatting, no nav bar or menu. But it looks just lovely in the Brackets Live Preview (other than the hamburger icon not responding. With my working website, I can open the index file in Chrome or Firefox and all is good. If someone can provide some direction I'd really appreciate it! <!DOCTYPE html> <html lang="en-us"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="author" content="USTaxTips.net"/> <link rel="stylesheet" href="../css/mystyles.css"> <link rel="shortcut icon" href="/favicon.ico"> </head> <body> <div w3-include-html="_borders/top.htm"></div> <script> includeHTML(); </script> <div id="container"> </div> </body> </html> mystyles.css topnav.css top.htm

I am looking for some help if anyone could please. I am creating a fully html and css navigation bar I am no expert in html or css just a hobbyist. I am trying to create a website for my business i don't want a nav bar like on google i want to create one with my own social media icons search bar which can find words on that page and hold my logo and page links If anyone has anything Please comment or Could anyone email me a snippet of code if they have done this before Many thanks Kieran Patience k.pwebdesign@outlook.com

Hi, I am making a portfolio website and i want to add a opacity to my pictures. But my navbar is sticky so it scrolls with the page but if i hover over a image it goes through the nav bar. Is there a way to fix this problem? I will add a picture to make it more clear. Hope you guys can help Thank You! /***************************** Code ************************************************/ .navigation-background{ grid-column: 1 / 4; display: grid; grid-template-columns: 20% 60% 20%; background-color: #2C2949; position: sticky; top: 0; width: 100%; } .navigation{ grid-column: 2 / 3; display: flex; flex-direction: row; justify-content: space-between; }

I am working on a new website for my wife. I tried to make it mobile responsive by using the w3css collapsible navbar with its accompanying javascript and it was working fine. I later tried to make the navbar sticky to improve on the user experience. On introducing the sticky navbar with its accompanying javascript, it becomes sticky on both desktop and mobile but the menu button on mobile stopped working although it is displayed. file.html

Hello, I'm a beginner website designer and am currently studying HTML5 and CSS at school. As of this, I have been assigned with a project in which I have to design and create a website on a specific topic. Using W3, I've come up with a navigation bar which is fixed and has links to other pages. I then wanted to add a cover photo/hero image too, but i cannot do both Navbar and Hero Image. If I have Navbar appear first in the <style> tag, then Hero doesn't work. Alternatively, If i use a Hero Image before Navbar, i cannot use the navbar. My question is, Is there a way to use both? I am very confused and would appreciate all the help i could get Regards,

Hi there, I’m a newbie in coding HTML, CSS (very poor in JS) and I would like to make a responsive navbar like that: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp (here the code: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav). My question is, when the navbar is in “responsive mode” and when clicking the menu button (right side in the example), is it possible to produce a "fade in/out" effects in order to display the menu items? Thank you in advance for your time and for any help you can provide. Sergio

Hi, I recently codded a html im kinda new i need help by getting a better stylish nav bar or menu bar here is the coding. Could you please tell me what to do or just copy my codding make it the same but have a menu or nav bar. For any proposes this is my website - http://jackaust.cf/ i also have all the htmls like index about and more. index.html <html> <head> <title>Jackaust | Home </title> </head> <![if !IE]> <link rel="icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/x-icon" /> <![endif]> <!-- This is needed for IE --> <link rel="shortcut icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/ico" /> <body bgcolor="#474747"> <body background ="IMG/test3.jpg"> <center> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <img src="IMG/banner2.png"> </td> </tr> </table> <table widgth="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <br> <font face="Lucida Fax" size="15" color="#fff"> <body link="white" link="white"> <a href="index.html">Home</a>| <a href="about.html">About</a> | <a href="videos.html">Videos</a> | <a href="downloads.html">Downloads</a> </font> </td> </tr> </table> <br> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <H1> <font face="Arial" size="15" color="#fff"> <br> <B><U>Welcome People To Jackaust Official Website!</B></U> <br> <br> <H4> <font face="Arial" size="4" color="#ffffff"> Welcome to my website it took ages to make through html finally its done! </H1> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> about.html <html> <head> <title>Jackaust | About </title> </head> <![if !IE]> <link rel="icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/x-icon" /> <![endif]> <!-- This is needed for IE --> <link rel="shortcut icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/ico" /> <body bgcolor="#474747"> <body background ="IMG/test3.jpg"> <center> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <img src="IMG/banner2.png"> </td> </tr> </table> <table widgth="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <br> <font face="Lucida Fax" size="15" color="#fff"> <a href="index.html">Home</a>| <a href="about.html">About</a> | <a href="videos.html">Videos</a> | <a href="downloads.html">Downloads</a> </font> </td> </tr> </table> <br> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <H1> <font face="Arial" size="15" color="#fff"> <br> <B><U>About Me</B></U> <br> <br> <H4> <font face="Arial" size="4" color="#ffffff"> I'm Jackaust and I make YouTube videos and play alot of games! </H1> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> videos.html <html> <head> <title>Jackaust | Videos </title> </head> <![if !IE]> <link rel="icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/x-icon" /> <![endif]> <!-- This is needed for IE --> <link rel="shortcut icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/ico" /> <body bgcolor="#474747"> <body background ="IMG/test3.jpg"> <center> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <img src="IMG/banner2.png"> </td> </tr> </table> <table widgth="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <br> <font face="Lucida Fax" size="15" color="#fff"> <a href="index.html">Home</a>| <a href="about.html">About</a> | <a href="videos.html">Videos</a> | <a href="downloads.html">Downloads</a> </font> </td> </tr> </table> <br> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <H1> <font face="Arial" size="15" color="#fff"> <br> <B><U>Videos</B></U> <br> <br> <H4> <font face="Arial" size="4" color="#ffffff"> <li><a href="https://www.youtube.com/channel/UCMYDsxDPlFPEk7UKGhiKDiw"><img src="IMG/photo.jpg" alt=""><span style="position:relative;bottom:20px;"></span></a></li> These are my some of my YouTube Videos </H1> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> Downloads.html <html> <head> <title>Jackaust | Home </title> </head> <![if !IE]> <link rel="icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/x-icon" /> <![endif]> <!-- This is needed for IE --> <link rel="shortcut icon" href="http://www26.online-convert.com/dl/web2/download-file/548acf9d-4132-4fa8-9169-14a465f8c8a8/photo_4_.ico" type="image/ico" /> <body bgcolor="#474747"> <body background ="IMG/test3.jpg"> <center> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <img src="IMG/banner2.png"> </td> </tr> </table> <table widgth="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <br> <font face="Lucida Fax" size="15" color="#fff"> <a href="index.html">Home</a>| <a href="about.html">About</a> | <a href="videos.html">Videos</a> | <a href="downloads.html">Downloads</a> </font> </td> </tr> </table> <br> <table width="1908" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <H1> <font face="Arial" size="15" color="#fff"> <br> <B><U>Here you can download items.</B></U> <br> <br> <H4> <font face="Arial" size="4" color="#ffffff"> Nouthing to download </H1> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

For whatever reason, anytime I use "position: sticky" in whatever form whether it's browser supported or through the Stickyfill.js it breaks the w3-bar navigation menu. w3schools.com obviously has a way to make it work. But I can't. Sticky off - dropdown menu works perfect. Stick ON and the menu button clicks but the dropdown content is not displayed. Or at the very least it's not visible if it is. http://dev.daellusknights.com/index.html <-- Sticky ON (broken) http://dev.daellusknights.com/index2.html <-- Sticky OFF (works) Is this a known issue or am I just missing something. Currently working with MS Edge and latest Chrome on Win 10 Pro (dev)

Hello, I have the problems that when i use a link in a w3css Navbar, the link is at the top of the bar. What i have when i write everything in a single entry: Code: <div class="w3-bottom" style="margin-right: 20%"> <ul class="w3-navbar w3-red"> <li> Powered by <a href="https://www.w3schools.com/w3css/" title="w3css"> w3css </a> and <a href="http://fontawesome.io" title="fontawesome"> fontawesome </a> </li> </ul> </div> What i have when i write it in single entrys: Code: <div class="w3-bottom" style="margin-right: 20%"> <ul class="w3-navbar w3-red"> <li> Powered by <a href="https://www.w3schools.com/w3css/" title="w3css"> w3css </a> and <a href="http://fontawesome.io" title="fontawesome"> fontawesome </a> </li> </ul> </div> What i will have: I hop you can help me //Cripi

Hi, I have created (or better, my intention was to create) a simple navbar by using W3.CSS framework as follows (see photo and code): 1/12 2/12 2/12 2/12 2/12 1/12 1/12 1/12 | MENU | Message || Username | Password | reCAPTCHA | Login || Register | Language | - I would like the height of the navbar to be self-adjusted; when I remove the "height: 55.5px" from, or set "height: inherit/auto" into, <div id="login"> the navbar's height takes the value of 2px and the buttons remain on the air! * What am I doing wrong? * How can I make the highest height of existing elements to inherit its value to the navbar's height? * Does "g-recaptcha" element play any role? I would like the navbar to behave responsively as follows: 2/12 2/12 4/12 4/12 or 3/12 3/12 3/12 3/12 | MENU | Message || Username | Password | | Username | Password | reCAPTCHA | Login | | Register | Language || reCAPTCHA | Login | | Register | Language | | MENU | and finally: 6/12 6/12 | Login | Register | | Menu | Language | How can I make the navbar to get wrapped and elements appear in a second row, by using only existing W3.CSS elements? Please, just give hints and advices. Thanks in advance. login_bar.html

Hey, is there in W3 already a script, or do i even need one, when i want, that: my active menu background to switch colors, when i scroll to a new section on my page? thx for the feedback!

Reading the bootstrap tutorial on this site, we can have a collapsed navbar when we are watching the site on a small screen: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h How can i have the same collapsed navbar all the time? i mean, i want the same collapsed navbar that appears on mobile to have it on the desktop's wide-screen too.

I recently found W3 Schools site related to my search for information on navigation bars. What I am most interested in learning is how to build a navigation bar that matches what W3 Schools has on their own website. I especially want to learn how to build a navbar that has dropdowns that behave the like the ones they have for Tutorials and Examples. I have been unable to locate anything on their tutorials that would show me an example of how that is done. If anyone has any or could point me in the direction of where I can find some examples, I would be extremely thankful.

Okay, so I'm trying to use: http://codyhouse.co/gem/3d-rotating-navigation/ but the text from my nav bar and buttons appear above it when I scroll down.. https://gyazo.com/fdb218e18dbe364635fd9652c693eaaa https://gyazo.com/f26263256f2a0e55488150d9ff008b10 Anybody know hot to fix this? :3 Thanks

Hello! I have a problem with the navigation on the following website: http://www.Ghitulescu.de/beta/index2.html While clicking on a navbar-item (was / wieviel / wann / wo / wer) the site *jumps* to the specific section but the first row of it (that's the h2-title!) is covered by the navbar itself. Any idea? Thanks! Regards, Vlad

Hello!I have some really strange behavior with my site:http://www.Ghitulescu.de/beta/index.htmlbuild with Twitter Bootstrap 3.The issue: when clicking on the navbar-items (was / wieviel / wann / wo / wer) the website jump to a wrong position.This problem appears only when navigating the website witha) Firefox (27.0) or Opera (12.16 Build 1860) on my iMac (running OS X 10.9.1) or c) Internet Explorer (9.0.8112 16421) d) Opera (12.16 Build 1860) e) Firefox (14.0.1) on a PC (running Windows 7)and when the browser-window is so wide that the navbar is not collapsed.This problem appears not at all with:a) Safari (7.0.1 (9537.73.11)) or Chrome (32.0.1700.102) on my iMac c) Mobile Safari, Opera and Chrome on an iPhone 5s & iPad 2 running iOS 7.0.5 d) Chrome (18.0.1025.162) or e) Safari on the PC above mentionedThe fact that this issue appears only when the navbar is not collapsed reminds me of a question I’ve put 5 days before, at stack overflow (collapsed navbar remains expanded on a Twitter Bootstrap website http://stackoverflow.com/questions/2...p-website?lq=1), regarding the problem that the collapsed navbar stayed extended after clicking… but I really don’t know if this is a related problem!Any ideas?Thanks!Regards, Vlad P.S. Perhaps related: I moved previously the id's from the h2-elements in span-elements placed slightly above the h2's due to the fact that the first row remained covered by the navbar. You can see this on http://www.Ghitulescu.de/beta/index2.html , where I don't have the navigation-Problems reclaimed above. Does this help?!