Search the Community

Showing results for tags 'navbar'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 10 results

  1. 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)
  2. 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
  3. 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
  4. 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!
  5. 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.
  6. 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.
  7. 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
  8. 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
  9. 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?!
  10. Hi everybody, I could manage to add google translator flags inside my menu bar but unfortunately it is looking nice only in chrome. In ie, the flags are appearing outside the menu bar, not in the same menu line but in a new column at the end of the bar with large buttons associated to the flags.I appreciate if someone could give me a clue.The style and html used are this: <style type="text/css">ul#menu{width:auto;height:30px;font-size:13px;font-weight:normal;font-family:Verdana, Helvetica, sans-serif;}ul#menu li{display:block;float:left;margin:0;padding:0;}ul#menu li a{display:block;float:left;color:#999999;text-decoration:none;font-weight:normal;padding:6px 25px 6px 25px;}ul#menu li a:hover{background-color:rgb(0,0,0);color:#ffffff;padding:6px 25px 6px 25px;}ul#menu li a.current{display:inline;background-color:rgb(0,0,0);float:left;margin:0;}.google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; margin:0; border:0; padding:3px 5px 3px 5px; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; margin:0; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; margin:0; border:0; }</style><ul id="menu"><li class="button"><a href="http://ferhairstylist.blogspot.com/">Home</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/profissional-cabeleireira.html">A Profissional</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/portfolio.html">Portifólio</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/precos.html">Serviços</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/contatos.html">Contatos</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/mapa.html">Mapa</a></li><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="right" title="Italiano" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM/ChdHC6vYT4s/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="right" title="Español" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YVCdHp5VI/AAAAAAAAADE/lWHzr5znExU/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="right" title="English" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a><div 0px 0pxâ?? style="â??font-size:10px;margin:3px" 3px></div></ul>