Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts

    CSS Responsive Menu

    Alright, encountering an issue. something that has always bothered me is li tags tend not to be responsive for mobile navigation.

    So lets say i have a nav like this.

    Code:
     <nav>
       <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Our Services</a></li>
         <li><a href="#">News</a></li>
       </ul>
     </nav>
    to typically get them to look ok on a normal site i would do this.

    Code:
    nav{
       width: 100%;
    }
    nav ul{
       list-style: none;
    }
    nav ul li {
       float: left;
    }
    nav ul li a{
       display: block;
       padding: 0 15px;
    }
    when I change the padding from pixels to padding, the resizing of the page does not effect the padding which is set to percentages. I changed it to using display table cell and it worked, but the padding on a long title was more than the padding on the shorter one which I don't know how to fix either. Am I missing something or is this just how CSS is.
    For more tutorials on my please check out my youtube channel here

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,307
    Thanks
    23
    Thanked 612 Times in 611 Posts
    How small of a cell phone window are you looking to style for? At 320px, which is the smallest most people program for, your css is fine.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    May 2014
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Take help from the professional menu designers for better webpage and menu design requirements.
    Designhill - Best place for Creative Logo Designers & Graphic Design

  • #4
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by sunfighter View Post
    How small of a cell phone window are you looking to style for? At 320px, which is the smallest most people program for, your css is fine.
    Here is the issue though if i just use padding on each side, when i shrink the screen down, the padding does not reduce, the last menu item drops to the next line when i reduce the window size.
    For more tutorials on my please check out my youtube channel here

  • #5
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Or if you don't have an answer, don't reply. Thank you.

    FYI, i am a professional developer.
    For more tutorials on my please check out my youtube channel here

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,307
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Use percents or anything besides px if you want things to shrink nicely.
    suggestion:
    nav ul li a{
    display: block;
    padding: 0 15%;
    }
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •