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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post

    Help with navigation css

    Hi,

    I am trying to make my navigation more mobile friendly. I am trying to make it smaller so it doesn't take up much space but I would like each item to fill the whole width of the menu. I have tried putting width:100% but it's not working so I must be missing something.

    The css is:-

    Code:
    #main-nav{ list-style:block; min-height:150px; margin-top:-10px;}
    .main-nav{padding: 0px; margin:0; position: relative; width:100%;}
    .main-nav li{font-size: 16px; line-height:30px; width:100%; display:block;}
    .main-nav li a{display: block; text-shadow: 0px 0px 2px #; color:#FFF; padding: 5px 20px; margin: 2px; background:#3b2f2c; letter-spacing: 1px; }
    .main-nav:hover li a{background: #3b2f2c; font-style:italic;}
    .main-nav li a:hover{background-image:url(../img/bg.jpg); text-shadow: 0px 0px 1px #f8f6cf; font-size:16.5px;}
    any ideas?

  • #2
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    I will actually add the link to it's here. Seems like it's when the browser is really small the menu shifts to the right instead of being 100%, not sure why

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Well the reason it is acting like this is because you have @media query break points, which define what a div looks and acts like on different screen sizes.

    If you take a look at
    http://kerrylouisebespokesoftfurnish...s/css/base.css

    and scroll to the bottom, you can see where these are defined and what they are doing.
    right now each item is spaning the whole width of the navigation div...although im not sure how you want to reduce the space it takes up if you still want them to span 100% of the width.

    The shift to the right is simply because you have padding on your ul

    Code:
    ul,ol { padding: 0 0 0 40px; }
    Just change it by adding this to your css inside of the media query.

    Code:
    ul#menu-mainnav { padding:0; }
    Hope this helps

    cheers

  • Users who have thanked aaronhockey_09 for this post:

    charlyanderson (02-05-2013)

  • #4
    Regular Coder
    Join Date
    Dec 2012
    Posts
    121
    Thanks
    15
    Thanked 1 Time in 1 Post
    Thanks that did help thank you


  •  

    Posting Permissions

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