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 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile UL links not working in Responsive State (@media) on dropdown menu.

    Hi I am new at reposnsive website and have created responsive menu based on a CSS script I found. Everything works, it responds to the various @media sizes and menu icon drops the UL list down. my issue is that the links no longer work work in the dropdown form, they work while in the regular inline mode.

    I have attached the code below, your help would be greatly appreciated as I need to get out company website done.

    HTML CODE.

    Code:
    <nav>
    
                <a href="#" id="menu-icon"><span>Menu</span></a>
    
                <ul id="value">
                    <li id="valueli"><a href="#hello">WELCOME</a></li>
                    <li id="valueli"><a href="http://www.valueportfolio.co.za" target="_blank">ABOUT US</a></li>
                    <li id="valueli"><a href="#methodology">METHODOLOGY</a></li>
                    <li id="valueli"><a href="#interaction">GUIDANCE</a></li>
                    <li id="valueli"><a href="#services">SERVICES</a></li>
                    <li id="valueli"><a href="#team">OUR TEAM</a></li>
                    <li id="valueli"><a href="#contact">TALK TO US</a></li>
                </ul>
            </nav>
    CSS BFEORE AT MEDIA TAG.

    Code:
    a {    text-decoration: none;      }
    
    a:hover { color: transparent; }
    
    #nav-wrap {
        margin-top: 20px;
    }
    
    nav { width: 1000px; height: 20px;  float: left; }
    
    #menu-icon {
    
        display: none;
        width: 25px;
        height: 25px;
        margin-left: 10px;
        background:  url( images/value_images/menu_png.png) center no-repeat;
    
    }
    
    a:hover#menu-icon {
    
        background-color: transparent;
        border-radius: 0 0 0 0;
    
    }
    
    #menu-icon span { display: none; 
        float: left; 
        margin-left: 50px;
        padding-top: 3px;
        width: 115px;
        position: absolute;
        font-family:"Verdana", Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000;
    }
    
    ul#value { list-style-type: none; display:block; width: 100%; margin: 0; padding: 0;}
    
    li#valueli {    font-family: "Verdana", Arial, Helvetica, sans-serif; font-size:12px; 
                    font-weight: normal; 
                    text-decoration: none;
                    padding-left: auto;
                    padding-right: auto;
                    display: inline-block;
                    line-height: 20px;
                    float: left;
                    text-align: center;
                    height: 20px;
                    width: 14.2%;
                    padding-start: 0;
                    -moz-padding-start: 0;
                    -webkit-padding-start: 0;
                    -o-padding-start: 0;
                    margin: 0;
        
    }
    
    li#valueli  a {    color: #000;
                        
    }
    
    li#valueli a:hover {color: #fa7b27;
                        
    }
    CSS @MEDIA 240px


    Code:
    @media screen and ( min-width: 240px ) and ( max-width: 319px ) {
    
        #menu-icon {
    
            display:inline-block;
        }
    #menu-icon span {     display: inline-block; 
                        float: left; 
                        margin-left: 35px;
                        padding-top: 3px;
                        width: 115px;
                        position: absolute;
                        font-family:"Verdana", Arial, Helvetica, sans-serif;
                        font-size: 12px;
                        color: #000;
    }
    nav { width: 100%; height: 25px;  float: right; background: #ffffff; margin-left: -1px; }
    
    nav:hover ul#value {
    
            display: inline-block;
            list-style: none; width: 100%; margin: 0 auto; 
    
        }
    nav ul#value { 
    
            display: none;
            overflow: hidden;
            position: relative;
            top: 0;
            left: 0;
            float: left;
            padding: 5px;
            background: #fff;
            width: 100%;
    
        }
        
    nav ul#value, nav:active ul#value { 
    
            display: none;
            overflow: hidden;
            position: relative;
            top: 0;
            left: 0;
            float: left;
            padding: 5px;
            background: #fff;
            width: 100%;
    
        }
    
    nav li#valueli {    font-family:"Verdana", Arial, Helvetica, sans-serif; font-size:12px; 
                font-weight: normal; 
                text-decoration: none;
                display: inline-block;
                text-align: left;
                border-bottom: #808080 1px dotted;
                width: 100%;
                height: 30px;
                margin: 0;
                padding: 3px;
        }
    }
    Last edited by VIPStephan; 05-13-2014 at 06:44 PM. Reason: added code BB tags


 

Tags for this Thread

Posting Permissions

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