Jump to content

Search the Community

Showing results for tags 'menu bar'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 5 results

  1. J.P

    Dropdown Menu Responsive

    Good Morning , Ive added a menu bar into my test site and it displays fine on desktop , but experiencing issues on phones and tablets . The menu bar does responds and fits to the relevant size of the screen, however the drop down button / link stays at the top in the main part of the nav bar instead of dropping into the relevant order of menu links . Please see the issue here http://www.jrstech.co.uk/OrginalHCForum/ Please could anyone provide some help, i'm sure I've missed something simple ! Thank you for your help in advance . here is my code for the menu bar : <div class="topnav" id="myTopnav"> <a class="nav-link" href="https:\\www.whufc.com">Home</a> <a class="nav-link" href="#">Blogs</a> <a class="nav-link" href="#">Videos</a> <a class="nav-link" href="#">Thames Iron Works</a> <div class="nav-dropdown"> <button class="nav-dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a class="nav-link" href="#">Contact Us</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> </div> here's my CSS : .topnav { overflow: hidden; background: #782b3a; box-shadow: inset 1px 0 7px 1px rgba(255,255,255,.5); margin-top: 10px; margin-bottom: 10px; padding: 12px ; text-align: center; font: normal normal medium 'Trebuchet MS',Verdana,Arial; border-bottom: 2px solid #1bb1e7; } .active { border-bottom: 4px solid #fff; color: white; } .topnav .icon { display: none; color: #fff; } .nav-dropdown { background: #782b3a; color: #ffffff; font-size: 20px; text-decoration: none; border-top: 0px solid #782b3a; border-bottom: 0px solid #782b3a; padding: 4px 0; margin: 0 10px ; display: inline-block; } .nav-dropdown .nav-dropbtn { font-size: 20px; border: none; outline: none; color: white; background-color: #782b3a; font-family: inherit; margin: 0px; transition: 0.95s ease; background: #782b3a; color: #ffffff; font-size: 20px; text-decoration: none; border-top: 0px solid #782b3a; border-bottom: 0px solid #782b3a; padding: 2px 0; margin: 0 0px ; } .dropdown-content { background-color: #782b3a; border-radius: 13px; display: none; position: absolute; background-color: #782b3a; min-width: 50px; z-index: 1; padding: 0px; } .dropdown-content a { float: none; color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; margin-top: 0 10px ; transition: 0.95s ease; border-bottom: 4px solid #782b3a; padding: 2px 0px; } .nav-link { background: #782b3a; color: #ffffff; font-size: 20px; text-decoration: none; border-top: 0px solid #782b3a; border-bottom: 0px solid #782b3a; padding: 2px 0; margin: 0 10px ; display: inline-block; } .nav-link:hover { border-top: 2px solid #782b3a; border-bottom: 3px solid #1bb1e7; padding: 0px 0; color: #ffffff; text-decoration: none; transition: 0.45s ease; } .2topnav a:hover, .dropdown:hover .dropbtn { height: 0px; border-bottom: 44px solid #fff; padding: 3px 50px; } .dropdown-content a:hover { background-color: #fff; color: black; background: #782b3a; color: #ffffff; font-size: 20px; text-decoration: none; border-bottom: 4px solid #1bb1e7; padding: 2px 0; } .nav-dropdown:hover .dropdown-content { display: block; border-bottom: 2px solid #1bb1e7; Padding: 10px 20px; } Here's my responsive code @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: left;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } }
  2. The menu bar links are active even when the menu bar is closed. I know the problem has to be in the javascript. I don't know javascript, how do you turn off the nav when the menu bar isn't open? I attached sample code so you can see the problem yourself. $(document).ready(function(){ /* Hamburger Menu */ $('.hamburger').on('click', function(e){ e.preventDefault(); $(this).toggleClass('opned'); $('header nav').toggleClass('active'); }); sample code.zip
  3. Hi, im having a little problem with a css menu bar displaying correctly on internet explorer but on firefox not showing it correctly. the problem is that the color I set on the css code is a red one, but firefox shows a blue color. I tried with other browsers to see if there was a problem with the code but for chrome,safari an ie the color shows correctly, having only firefox with the bad color displayed. Here is the code of the menu bar on the css: #menu {list-style:none;width:1160px;margin:30px auto 0px auto;height:43px;padding:0px 20px 0px 20px;/* Rounded Corners */ -moz-border-radius: 1px;-webkit-border-radius: 1px;border-radius: 1px;/* Background color and gradients */ background: #C81F18;background: -moz-linear-gradient(top, #0272a7, #013953);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); I looked everywhere on the code to see if there is a misplaced color or a syntax error but haven't found it. Thanks in advanced for your time and help.
  4. I am trying to make a horizontal menu bar for a website. I am doing it the way they show on W3 with a <ul> list and css formatting. Every attempt looks horrible in IE 8.0. The usual bullets are still present and it is still vertical instead of floating horizontal.Can anyone take a look at this and tell me how to make this type of menu show up properly in the common versions of IE? Here is the site: http://cwarchitect.d....com/index.html
  5. 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>
  • Create New...