1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS Modifying menus

Discussion in 'Web Development' started by airfo, Jul 23, 2012.

  1. airfo

    airfo New Member

    How do I add buttons to a menu using CSS? When I add a line to the template list in CSS, nothing happens?
     
  2. Geoff Tyrer

    Geoff Tyrer Member

    CSS is for styling. You will have to modify the HTML to add the button.
     
  3. Recidivist

    Recidivist VIP Member

    As Geoff said, a new menu button has to be added in the HTML rather than the CSS. If you're using a template from FWT, it might look like the code below, in which case simply copy one of the <li> lines and replace the anchor target and text.

    HTML:
            <div class="header">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li class="selected"><a href="about.html">About</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="NEWBUTTON.html">NEWBUTTON</a></li>
                    </ul>
                </div>
    
    To change its styling, the above HTML is referenced by the CSS below. The CSS is different for every template but this should show you how the CSS ties to the HTML.


    Code:
    .header ul{
     
        margin:0;
     
        list-style:none;
     
        padding:13px 0 0;
     
        float:right;
     
    }
     
    .header ul li{
     
        float:left;
     
        margin:0 0 0 63px;
     
    }
     
    .header ul li.selected a,.header ul li a:hover{
     
        color:#f78117;
     
    }
     
    .header ul li a{
     
        font-size:16px;
     
        text-decoration:none;
     
        color:#5e5e5e;
     
        font-family: 'RokkittRegular';
     
        outline:none;
     
    }
    
    This is from the Generic website template.
     
  4. navyfalcon

    navyfalcon Well-Known Member Verified Member