Responsive menu bar

by 20 replies
24
My website has a navigational menu bar across the top made up of 5 buttons. These buttons are sized by the length of the word inside of it.

How would I go about making a menu bar like this conform to Google's definition of mobile-friendly?
#website design #bar #menu #responsive
  • You have to make all of your website responsive not only menu. Mobile friendly is all about that how your website respond to different devices.
    • [1] reply
    • Yes, I understand that. I am asking about the menu bar.


      I find it amazing that this forum is 99% scripted responses which have very little to do with the topic of the thread or the question asked.
  • Like already said, making just the menu bar responsive wont do much good, but...

    It depends. Depending on the content of the menu, it could be as simple as giving it a fluid width, so it contracts and the menu items stack on mobile browsers. If the menu items are too large or too numerous for that solution, you might need to have the entire menu collapse into a side (off-canvas) menu, or a menu button which collapses / expands the menu.
  • Most of the other stuff on my website is relatively easy to make responsive. I am changing one thing at a time since I am a beginner and have to learn everything as I go. I originally paid $150 for a 5 page website to be made for me, but over the years I have changed most of it, one thing at a time. Now I need to change it to make it responsive.

    The menu bar seems like it will be hard to make mobile friendly. Here is the HTML and the CSS:


    PHP Code:
            <div id="Nav_Top">
                
                <    ul>
                    <    li><a href="/" class="nav_top_first">Home</a></li>
                    <    li><a href="Services.php">Services</a></li>
                    <    li><a href="Pricing.php">Pricing</a></li>
                    <    li><a href="Blog.php">Blog</a></li>
                    <    li><a href="Contact.php">Contact</a></li>
                </    ul>
            
            </    div> 
    PHP Code:
    /* Styles for Top Navigation */
    #Nav_Top {
            width:1000px;
            float:left;
            margin-bottom:10px;
    }
    #Nav_Top UL {
            width:1000px;
            float:left;
        list-    style:none;
            background-color:#0096bd;
        
            -moz-border-radius: 5px;
        -    o-border-radius: 5px;
        -    webkit-border-radius: 5px;
        -    khtml-border-radius: 5px;
            behavior: url(border-radius.htc);
            border-radius: 5px;

    }
    #Nav_Top UL LI {
            display:inline;
    }
    #Nav_Top UL LI A {
            display:block;
            padding:12px 45px;
            float:left;
            color:#f4f4f4;
            font-size:18px;
            font-weight:100;
            border-right:#f4f4f4 1px solid;
        
            background-color:#0096bd;
    }
    #Nav_Top UL LI A:Hover , #Nav_Top UL LI.top_current A {
            background-color:#b51412;
    }
    #Nav_Top UL LI A.nav_top_first {

            -moz-border-bottom-left-radius: 5px;
        -    o-border-bottom-left-radius: 5px;
        -    webkit-border-bottom-left-radius: 5px;
        -    khtml-border-bottom-left-radius: 5px;
            behavior: url(border-radius.htc);
            border-bottom-left-radius: 5px;

        -    moz-border-top-left-radius: 5px;
        -    o-border-top-left-radius: 5px;
        -    webkit-border-top-left-radius: 5px;
        -    khtml-border-top-left-radius: 5px;
            behavior: url(border-radius.htc);
            border-top-left-radius: 5px;

    }
    /* Styles for Top Navigation */ 
  • PHP Code:
    @media screen and (max-width:1000px) {
          #nav_top, #nav_top ul { float: none; max-width: 100%; width: 100%; }
      #nav_top ul li a { padding-bottom: 10px; padding-top: 10px; }
    } 
    Your question doesn't have an easy answer. The above CSS will let the menu items wrap to the next line, and makes the links tall enough to be easily touchable.

    If you want to learn to do this stuff yourself, look at themes that do what you want yours to do and model your CSS on them.

    The menu structure (an unordered list) is 'standard' for menus, and relatively easy to manipulate with CSS.

    • [2] replies
    • Thanks for the help.

      Doing it myself is hard because I have to learn as I go. For example, the code you posted will take me half an hour just to figure out if I should just add it to my CSS or if it should replace something else that is currently there

      I'd like to have a pro do it, but it's so hard to find a pro when most of the people seem to be scammers or "pros" who don't know anything about website development and just sub the work out to fiverr gigs.
      • [1] reply
    • thanks for give me a nice code about responsive website .
  • Look a jquery menus. Smartmenus is a good place to start.
  • FlexSqueeze2 does it automatically. It converts the menu to a drop down bar.
  • Top Bar | Foundation Docs

    This is my favorite way to create the function of a wide menu bar on a PC, that will shrink on a mobile phone. Foundation is also my favorite to do a bunch of other things like create price tables, and sub bars for menus. The way they create code is also very easy. Take a look!
  • One of the trickiest parts to be responsified on a website is “the Navigation”, this part is really important for the website accessibility, as this is one of the ways visitors jump over the web pages.
  • Also consider using css media queries. -> Google

    PHP Code:
    @media screen and () {
            /*your css code*/
    } 
  • [DELETED]
  • You can use jQuery plugin for it. There is a plugin named slicknave (slicknav.com).
  • I think you can make manually code it is better for any site.
    • [1] reply
    • You should make responsive your website to maintain google mobile friendly website.
      you can do this using media queries for All screen sizes.
      Only for menu responsive you can use jquery plugin such as SlickNav.
  • [DELETED]
  • Upload the bootstrap pack on your site In bootstrap pack consist a responsive menu , copy and paste that code to your site header section
  • The easiest way to make the whole website responsive is to integrate some responsive framework on it, like bootstrap or foundation.
  • There is a lot of useful information on this thread.

    Anymore information, and the warriors here will be doing the work for you .

    The first google search I did, "responsive menu code example" returned a lot of good results that also list the source code for the examples.

    Sounds like you're semi familiar with updating your code, so you should be able to use/modify the examples. If you're not a developer, you may want to stick to something with a UI like a bootstrap.

    Best,
    Will
Join the discussion

Next Topics on Trending Feed

  • 24

    Responsive menu bar

    My website has a navigational menu bar across the top made up of 5 buttons. These buttons are sized by the length of the word inside of it. How would I go about making a menu bar like this conform to Google's definition of mobile-friendly?