20 replies
  • WEB DESIGN
  • |
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?
#bar #menu #responsive
  • Profile picture of the author WPThemeGuru
    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.
    {{ DiscussionBoard.errors[10010747].message }}
    • Profile picture of the author LoclBiz
      Originally Posted by WPThemeGuru View Post

      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.
      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.
      {{ DiscussionBoard.errors[10010758].message }}
  • Profile picture of the author MadHu5tle
    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.
    {{ DiscussionBoard.errors[10011256].message }}
  • Profile picture of the author LoclBiz
    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-radius5px;
        -
    o-border-radius5px;
        -
    webkit-border-radius5px;
        -
    khtml-border-radius5px;
        
    behaviorurl(border-radius.htc);
        
    border-radius5px;

    }
    #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-radius5px;
        -
    o-border-bottom-left-radius5px;
        -
    webkit-border-bottom-left-radius5px;
        -
    khtml-border-bottom-left-radius5px;
        
    behaviorurl(border-radius.htc);
        
    border-bottom-left-radius5px;

        -
    moz-border-top-left-radius5px;
        -
    o-border-top-left-radius5px;
        -
    webkit-border-top-left-radius5px;
        -
    khtml-border-top-left-radius5px;
        
    behaviorurl(border-radius.htc);
        
    border-top-left-radius5px;

    }
    /* Styles for Top Navigation */ 
    {{ DiscussionBoard.errors[10011587].message }}
  • Profile picture of the author SteveJohnson
    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.

    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[10011860].message }}
    • Profile picture of the author LoclBiz
      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.
      {{ DiscussionBoard.errors[10011956].message }}
      • Profile picture of the author SteveJohnson
        Originally Posted by LoclBiz View Post

        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.
        You can add it to the end of your stylesheet. It is a media query, it doesn't replace what is already there. It enhances/changes properties based on the rule (that the window width is less than 1000px).

        I agree with you about good people being hard to find. I am a pro, and I am neither a scammer nor do I farm work out to fiverrrrrrs. This is the kind of stuff I do all day, and have for the last 13+ years.

        Just so the above isn't taken as an advertisement, I am not for hire. My prices are out of reach of most warrior forum members, especially these days.
        Signature

        The 2nd Amendment, 1789 - The Original Homeland Security.

        Gun control means never having to say, "I missed you."

        {{ DiscussionBoard.errors[10016778].message }}
        • Profile picture of the author LoclBiz
          Originally Posted by SteveJohnson View Post

          You can add it to the end of your stylesheet. It is a media query, it doesn't replace what is already there. It enhances/changes properties based on the rule (that the window width is less than 1000px).

          I agree with you about good people being hard to find. I am a pro, and I am neither a scammer nor do I farm work out to fiverrrrrrs. This is the kind of stuff I do all day, and have for the last 13+ years.

          Just so the above isn't taken as an advertisement, I am not for hire. My prices are out of reach of most warrior forum members, especially these days.
          Do you know of any pro who does small freelancing like this who can help me with my website?

          Sure, I can go to freelancer or fiverr, but I've been burned too many times.
          {{ DiscussionBoard.errors[10016835].message }}
    • Profile picture of the author Packers
      thanks for give me a nice code about responsive website .
      {{ DiscussionBoard.errors[10026383].message }}
  • Profile picture of the author Skyjockey
    Look a jquery menus. Smartmenus is a good place to start.
    {{ DiscussionBoard.errors[10016457].message }}
  • Profile picture of the author Sire
    FlexSqueeze2 does it automatically. It converts the menu to a drop down bar.
    {{ DiscussionBoard.errors[10017508].message }}
  • Profile picture of the author lokt up
    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!
    {{ DiscussionBoard.errors[10025564].message }}
  • Profile picture of the author Puneetrajpoot
    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.
    {{ DiscussionBoard.errors[10028359].message }}
  • Profile picture of the author Nonilol
    Also consider using css media queries. -> Google

    PHP Code:
    @media screen and () {
        
    /*your css code*/

    {{ DiscussionBoard.errors[10028807].message }}
  • Profile picture of the author nazmul18
    You can use jQuery plugin for it. There is a plugin named slicknave (slicknav.com).
    {{ DiscussionBoard.errors[10038747].message }}
  • Profile picture of the author ariful123
    I think you can make manually code it is better for any site.
    {{ DiscussionBoard.errors[10040603].message }}
    • Profile picture of the author designdoor
      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.
      {{ DiscussionBoard.errors[10054617].message }}
  • Profile picture of the author yasar
    Upload the bootstrap pack on your site In bootstrap pack consist a responsive menu , copy and paste that code to your site header section
    {{ DiscussionBoard.errors[10056984].message }}
  • {{ DiscussionBoard.errors[10098937].message }}
  • Profile picture of the author Techalo
    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
    {{ DiscussionBoard.errors[10099151].message }}

Trending Topics