CSS Navigation menu

Discussion in 'Web Design and Development' started by AppleDApp, Feb 1, 2016.

  1. AppleDApp macrumors 68020

    AppleDApp

    Joined:
    Jun 21, 2011
    #1
    I am trying have a horizontal navigation menu without bullet points. there seems to be a mistake I my code. I have reviewed the code several times and check both online and here for ideas on how to fix the issue but i am at a loss.

    I am following this guide code is at 8:40min
    here is the code from the video

    [​IMG]

    I have typed this code so far

    Code:
    /* Navigation Menus */
    .site-nav ul {
        margin: 0;
        padding: 0;
    }
    
    .site-nav ul:before, .site-nav:after { content: ""; display: table; }
    .site-nav ul:after { clear: both; }
    .site-nav ul { *zoom: 1; }
    
    .site-nav ul li {
        list-style: none;
        float: left;
        }
    
    /*Site Header Menu*/
    .site-header nav ul li a:link,
    .site-header nav ul li a:visited{
        display: block;
        padding: 10px 18px;
        border: 1px solid #BBB;
        border-bottom: none;
    
    }
    and I don't see a change to my page.
    [​IMG]

    The code should remove the bullets and place the three menus on the same row. What am I missing?
     
  2. Pakaku macrumors 68000

    Pakaku

    Joined:
    Aug 29, 2009
    #2
    Code:
       ul
       {
         padding:0;
       }
    
       ul li
       {
         display: inline-block;
       }
    
    That's usually all I have to do.
     
  3. AppleDApp thread starter macrumors 68020

    AppleDApp

    Joined:
    Jun 21, 2011
  4. Strider64 macrumors regular

    Strider64

    Joined:
    Dec 1, 2015
    Location:
    Suburb of Detroit
    #4
    to get rid of bullet points

    Code:
    ul {
      list-style: none;
    }
     
  5. BrumGB macrumors newbie

    BrumGB

    Joined:
    Apr 4, 2011
    Location:
    England / Coventry / Northampton
    #5
  6. AppleDApp thread starter macrumors 68020

    AppleDApp

    Joined:
    Jun 21, 2011
    #6
    I'm using wordpress not sure if that changes anything. here is my code below.

    HTML:
    <!DOCTYPE html>
    <html <?php language_attributes();?>>
    <head>
        <meta charset="<?php bloginfo('charset'); ?>">
        <meta name="viewport" content= "width=device-width">
        <title><?php bloginfo('name'); ?></title>
        <?php wp_head(); ?>
    </head>
    
    <body <?php body_class();?>>
    
    <div class="container">
        <!-- site header -->
        <header class="site-header">
        <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
        <h5><?php bloginfo('description');?></h5>
            <nav class = "site-nav">
            <?php
          
            $args = array(
                'theme_location' => 'primary'
          
            );
            ?>
          
                <?php wp_nav_menu($args ); ?>
            </nav>
      
        </header><!-- /site header -->
      
    
     
  7. olup macrumors 6502

    Joined:
    Oct 11, 2011
    #7
    You can find your output by right clicking in the browser window -> view page source, that'll show the HTML that's output.
     
  8. AppleDApp thread starter macrumors 68020

    AppleDApp

    Joined:
    Jun 21, 2011
    #8
    Page source, hope this is what you are looking for.

    HTML:
    <!DOCTYPE html>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content= "width=device-width">
        <title>FXit | FX will fix IT</title>
        <meta name='robots' content='noindex,follow' />
    
    <!-- All in One SEO Pack 2.2.7.5 by Michael Torbert of Semper Fi Web Design[122,133] -->
    <meta name="description" itemprop="description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum tincidunt eros, eget consectetur tortor dignissim eget. Proin scelerisque luctus mi, nec" />
    
    <link rel="canonical" href="http://localhost:8888/wordpress/" />
    <!-- /all in one seo pack -->
            <script type="text/javascript">
                window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/localhost:8888\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.4.1"}};
                !function(a,b,c){function d(a){var c,d=b.createElement("canvas"),e=d.getContext&&d.getContext("2d");return e&&e.fillText?(e.textBaseline="top",e.font="600 32px Arial","flag"===a?(e.fillText(String.fromCharCode(55356,56806,55356,56826),0,0),d.toDataURL().length>3e3):"diversity"===a?(e.fillText(String.fromCharCode(55356,57221),0,0),c=e.getImageData(16,16,1,1).data.toString(),e.fillText(String.fromCharCode(55356,57221,55356,57343),0,0),c!==e.getImageData(16,16,1,1).data.toString()):("simple"===a?e.fillText(String.fromCharCode(55357,56835),0,0):e.fillText(String.fromCharCode(55356,57135),0,0),0!==e.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag"),unicode8:d("unicode8"),diversity:d("diversity")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag&&c.supports.unicode8&&c.supports.diversity||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
            </script>
            <style type="text/css">
    img.wp-smiley,
    img.emoji {
        display: inline !important;
        border: none !important;
        box-shadow: none !important;
        height: 1em !important;
        width: 1em !important;
        margin: 0 .07em !important;
        vertical-align: -0.1em !important;
        background: none !important;
        padding: 0 !important;
    }
    </style>
    <link rel='stylesheet' id='open-sans-css'  href='https://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&#038;subset=latin%2Clatin-ext&#038;ver=4.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='dashicons-css'  href='http://localhost:8888/wordpress/wp-includes/css/dashicons.min.css?ver=4.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='admin-bar-css'  href='http://localhost:8888/wordpress/wp-includes/css/admin-bar.min.css?ver=4.4.1' type='text/css' media='all' />
    <link rel='stylesheet' id='contact-form-7-css'  href='http://localhost:8888/wordpress/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=4.3.1' type='text/css' media='all' />
    <link rel='stylesheet' id='style-css'  href='http://localhost:8888/wordpress/wp-content/themes/FXit/style.css?ver=4.4.1' type='text/css' media='all' />
    <script type='text/javascript' src='http://localhost:8888/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
    <script type='text/javascript' src='http://localhost:8888/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
    <link rel='https://api.w.org/' href='http://localhost:8888/wordpress/wp-json/' />
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8888/wordpress/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8888/wordpress/wp-includes/wlwmanifest.xml" />
    <meta name="generator" content="WordPress 4.4.1" />
    <style type="text/css" media="print">#wpadminbar { display:none; }</style>
    <style type="text/css" media="screen">
        html { margin-top: 32px !important; }
        * html body { margin-top: 32px !important; }
        @media screen and ( max-width: 782px ) {
            html { margin-top: 46px !important; }
            * html body { margin-top: 46px !important; }
        }
    </style>
    </head>
    
    <body class="home blog logged-in admin-bar no-customize-support">
    
    <div class="container">
        <!-- site header -->
        <header class="site-header">
        <h1><a href="http://localhost:8888/wordpress">FXit</a></h1>
        <h5>FX will fix IT</h5>
            <nav class = "site-nav">
                   
                <div class="menu-primary-menu-links-container"><ul id="menu-primary-menu-links" class="menu"><li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://localhost:8888/wordpress/index.php/how-tos/">How to&#8217;s</a></li>
    <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://localhost:8888/wordpress/index.php/services/">Services</a></li>
    <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://localhost:8888/wordpress/index.php/sample-page/">Sample Page</a></li>
    </ul></div>        </nav>
       
        </header><!-- /site header -->
       
        <article class="post">
                <h2><a href="http://localhost:8888/wordpress/index.php/2016/01/23/example-post/">Example Post</a> </h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum tincidunt eros, eget consectetur tortor dignissim eget. Proin scelerisque luctus mi, nec dignissim sem placerat vitae. Nulla facilisis velit quis massa tincidunt, sit amet commodo elit suscipit. Nam efficitur neque quis lorem laoreet porta. Curabitur posuere congue semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec purus ipsum, fermentum fringilla ornare eu, molestie id augue. Proin pulvinar sagittis dapibus.</p>
    <p>Duis tempor dui non massa mollis rutrum. Phasellus non hendrerit nisi, ut consequat lacus. Quisque nec augue suscipit, eleifend purus eget, malesuada dolor. Vestibulum eleifend tortor quis placerat cursus. Pellentesque non sodales quam. Donec sagittis tellus dolor, vel aliquam velit eleifend vitae. Nulla facilisi. Integer ultricies lacus sit amet ipsum tincidunt, mattis pellentesque urna sodales. Integer nec tempor nunc. Morbi magna dui, rhoncus non massa sit amet, aliquam semper mi. Vestibulum aliquam aliquet pretium.</p>
        </article>
       
            <article class="post">
                <h2><a href="http://localhost:8888/wordpress/index.php/2016/01/23/howto-teamviewer/">How to download and install TeamViewer</a> </h2>
                <p>TeamViewer is an application used to connect to any computer in just a few clicks. TeamViewer allows you to transfer files between computers, share your desktop or control a computer remotely.</p>
    <p>TeamViewer is compatible with all of your devices; Microsoft Windows, Mac OS X, Linux, iOS and Android.</p>
    <p>This tutorial will guide you through the installation of TeamViewer and help you establish a remote connection with a partner, in this case a technical support expert.</p>
    <p>1.Open your web browser and go to <a href="http://www.teamviewer.com/en-us/download/mac/">http://www.teamviewer.com</a> or select the appropriate link below.</p>
    <p style="text-align: center;"><a href="http://www.teamviewer.com/en-us/download/windows/">Link for Windows</a>     <a href="http://www.teamviewer.com/en-us/download/mac/">Link for Mac</a>      <a href="http://www.teamviewer.com/en-us/download/linux/">Link for Linux</a>    <a href="http://www.teamviewer.com/en-us/download/chrome-os/">Link for Chrome OS</a></p>
    <p>2. Click the green download button to start downloading TeamViewer.</p>
    <p>&nbsp;</p>
    <p>Depending on your browser the download may be in different locations.</p>
    <div id="attachment_15" style="width: 1034px" class="wp-caption alignnone"><img class="wp-image-15 size-large" src="http://localhost:8888/wordpress/wp-content/uploads/2016/01/TeamViewer-download-Chrome-1024x687.png" alt="TeamViewer download Chrome" width="1024" height="687" srcset="http://localhost:8888/wordpress/wp-content/uploads/2016/01/TeamViewer-download-Chrome-300x201.png 300w, http://localhost:8888/wordpress/wp-content/uploads/2016/01/TeamViewer-download-Chrome-768x515.png 768w, http://localhost:8888/wordpress/wp-content/uploads/2016/01/TeamViewer-download-Chrome-1024x687.png 1024w, http://localhost:8888/wordpress/wp-content/uploads/2016/01/TeamViewer-download-Chrome.png 1309w" sizes="(max-width: 1024px) 100vw, 1024px" /><p class="wp-caption-text">Internet Explorer, Firefox and Chrome have the download file saved in the bottom left-hand corner of the screen.</p></div>
    <p>Caption 1 Internet Explorer, Firefox and Chrome have the download file saved in the bottom left-hand corner of the screen.</p>
    <p>Caption 2 Safari has the download file saved in the top right-hand corner of the screen.</p>
    <p>3. Double click the TeamViewer installer file to begin installing.</p>
    <p>4. Choose Basic Installation</p>
    <p>5. Select Personal/Non-commercial for personal use</p>
    <p>6. Once the installation is complete you are ready to connection to a technician or other partner.</p>
    <p>7. Open the TeamViewer application and provide your ID and password to your partner or technician and you will be able to be assisted by a technician or other partner.</p>
        </article>
       
            <article class="post">
                <h2><a href="http://localhost:8888/wordpress/index.php/2016/01/23/hello-world/">Hello world!</a> </h2>
                <p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
        </article>
       
       
    <footer class= "site-footer">
    
    <nav class = "site-nav">
               
                <div class="menu-footer-menu-links-container"><ul id="menu-footer-menu-links" class="menu"><li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://localhost:8888/wordpress/index.php/contact/">Contact</a></li>
    </ul></div>        </nav>
    
    <p>FXit - &copy; 2016</p>
    </footer>
    
    </div><!--container-->
    <script type='text/javascript' src='http://localhost:8888/wordpress/wp-includes/js/admin-bar.min.js?ver=4.4.1'></script>
    <script type='text/javascript' src='http://localhost:8888/wordpress/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script>
    <script type='text/javascript'>
    /* <![CDATA[ */
    var _wpcf7 = {"loaderUrl":"http:\/\/localhost:8888\/wordpress\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","recaptchaEmpty":"Please verify that you are not a robot.","sending":"Sending ..."};
    /* ]]> */
    </script>
    <script type='text/javascript' src='http://localhost:8888/wordpress/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.3.1'></script>
    <script type='text/javascript' src='http://localhost:8888/wordpress/wp-includes/js/wp-embed.min.js?ver=4.4.1'></script>
        <script type="text/javascript">
            (function() {
                var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
    
                request = true;
    
                b[c] = b[c].replace( rcs, ' ' );
                b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
            }());
        </script>
                <div id="wpadminbar" class="nojq nojs">
                                <a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
                            <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Toolbar" tabindex="0">
                    <ul id="wp-admin-bar-root-default" class="ab-top-menu">
            <li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item"  aria-haspopup="true" href="http://localhost:8888/wordpress/wp-admin/about.php"><span class="ab-icon"></span><span class="screen-reader-text">About WordPress</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
            <li id="wp-admin-bar-about"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-admin/about.php">About WordPress</a>        </li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
            <li id="wp-admin-bar-wporg"><a class="ab-item"  href="https://wordpress.org/">WordPress.org</a>        </li>
            <li id="wp-admin-bar-documentation"><a class="ab-item"  href="https://codex.wordpress.org/">Documentation</a>        </li>
            <li id="wp-admin-bar-support-forums"><a class="ab-item"  href="https://wordpress.org/support/">Support Forums</a>        </li>
            <li id="wp-admin-bar-feedback"><a class="ab-item"  href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a>        </li></ul></div>        </li>
            <li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item"  aria-haspopup="true" href="http://localhost:8888/wordpress/wp-admin/">FXit</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
            <li id="wp-admin-bar-dashboard"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-admin/">Dashboard</a>        </li></ul><ul id="wp-admin-bar-appearance" class="ab-submenu">
            <li id="wp-admin-bar-themes"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-admin/themes.php">Themes</a>        </li>
            <li id="wp-admin-bar-menus"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-admin/nav-menus.php">Menus</a>        </li></ul></div>        </li>
            <li id="wp-admin-bar-customize" class="hide-if-no-customize"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2Fwordpress%2F">Customize</a>        </li>
            <li id="wp-admin-bar-comments"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-admin/edit-comments.php" title="0 comments awaiting moderation"><span class="ab-icon"></span><span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-0">0</span></a>        </li>
            <li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item"  aria-haspopup="true" href="http://localhost:8888/wordpress/wp-admin/post-new.php"><span class="ab-icon"></span><span class="ab-label">New</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu">
            <li id="wp-admin-bar-new-post"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-admin/post-new.php">Post</a>        </li>
            <li id="wp-admin-bar-new-media"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-admin/media-new.php">Media</a>        </li>
            <li id="wp-admin-bar-new-page"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-admin/post-new.php?post_type=page">Page</a>        </li>
            <li id="wp-admin-bar-new-user"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-admin/user-new.php">User</a>        </li></ul></div>        </li>
            <li id="wp-admin-bar-all-in-one-seo-pack" class="menupop"><a class="ab-item"  aria-haspopup="true" href="http://localhost:8888/wordpress/wp-admin/admin.php?page=all-in-one-seo-pack/aioseop_class.php">SEO</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-all-in-one-seo-pack-default" class="ab-submenu">
            <li id="wp-admin-bar-aiosp_edit_1"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-admin/post.php?post=1&#038;action=edit#aiosp">Edit SEO</a>        </li>
            <li id="wp-admin-bar-all-in-one-seo-pack/aioseop_performance.php"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-admin/admin.php?page=all-in-one-seo-pack/aioseop_performance.php">Performance</a>        </li>
            <li id="wp-admin-bar-all-in-one-seo-pack/aioseop_feature_manager.php"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-admin/admin.php?page=all-in-one-seo-pack/aioseop_feature_manager.php">Feature Manager</a>        </li>
            <li id="wp-admin-bar-aioseop-pro-upgrade"><a class="ab-item"  href="http://semperplugins.com/plugins/all-in-one-seo-pack-pro-version/?loc=menu" target="_blank">Upgrade To Pro</a>        </li></ul></div>        </li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
            <li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://localhost:8888/wordpress/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" /><label for="adminbar-search" class="screen-reader-text">Search</label><input type="submit" class="adminbar-button" value="Search"/></form></div>        </li>
            <li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item"  aria-haspopup="true" href="http://localhost:8888/wordpress/wp-admin/profile.php">Howdy, fxwillfixit<img alt='' src='http://1.gravatar.com/avatar/a72412dccbb3d52d5d2395f37e1012f1?s=26&#038;d=mm&#038;r=g' srcset='http://1.gravatar.com/avatar/a72412dccbb3d52d5d2395f37e1012f1?s=52&amp;d=mm&amp;r=g 2x' class='avatar avatar-26 photo' height='26' width='26' /></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class="ab-submenu">
            <li id="wp-admin-bar-user-info"><a class="ab-item" tabindex="-1" href="http://localhost:8888/wordpress/wp-admin/profile.php"><img alt='' src='http://1.gravatar.com/avatar/a72412dccbb3d52d5d2395f37e1012f1?s=64&#038;d=mm&#038;r=g' srcset='http://1.gravatar.com/avatar/a72412dccbb3d52d5d2395f37e1012f1?s=128&amp;d=mm&amp;r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /><span class='display-name'>fxwillfixit</span></a>        </li>
            <li id="wp-admin-bar-edit-profile"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-admin/profile.php">Edit My Profile</a>        </li>
            <li id="wp-admin-bar-logout"><a class="ab-item"  href="http://localhost:8888/wordpress/wp-login.php?action=logout&#038;_wpnonce=7415960521">Log Out</a>        </li></ul></div>        </li></ul>            </div>
                            <a class="screen-reader-shortcut" href="http://localhost:8888/wordpress/wp-login.php?action=logout&#038;_wpnonce=7415960521">Log Out</a>
                        </div>
    
            </body>
    </html>
    
     
  9. olup macrumors 6502

    Joined:
    Oct 11, 2011
    #9
    your original code should work, like BrumGB already said, put the list-style: none; on the ul though.

    you can remove the
    Code:
    .site-nav ul { *zoom: 1; }
    , since IE6 - 10 aren't supported anymore.

    http://cssmojo.com/the-very-latest-clearfix-reloaded/
     
  10. AppleDApp thread starter macrumors 68020

    AppleDApp

    Joined:
    Jun 21, 2011
    #10
    Sorry for the delay I didn't get the notification. I removed
    Code:
    .site-nav ul { *zoom: 1; }
    I already have
    Code:
    ul {list-style: none;}
    to remove the bullets. Despite that the bullets are still present.
     
  11. Efrem macrumors member

    Joined:
    Jul 30, 2009
    #11
    You removed the bullets at the ul level. Do you have another style at the li level that restores them, directly or by implication by restoring the defaults? If you do, it will override the ul style.
     
  12. AppleDApp thread starter macrumors 68020

    AppleDApp

    Joined:
    Jun 21, 2011
    #12
    Code:
    .site-nav ul li {
        list-style: none;
        float: left;
        }
    Does this code not remove the list style for both li and ul levels?
     
  13. AppleDApp thread starter macrumors 68020

    AppleDApp

    Joined:
    Jun 21, 2011
  14. olup macrumors 6502

    Joined:
    Oct 11, 2011
    #14
    I took your code from your page view and made a jsbin

    Code:
    .menu {
      list-style: none;
    }
    .menu:before,
    .menu:after {
      content: '';
      display: block;
    }
    .menu:after {
      clear: both;
    }
    .menu li {
      float: left;
      margin-right: 10px;
    }
    .menu li:last-of-type {
      margin-right: 0;
    }
    
    https://jsbin.com/viconocogi/edit?html,css,output
     
  15. AppleDApp thread starter macrumors 68020

    AppleDApp

    Joined:
    Jun 21, 2011
    #15
    Thank you
     
  16. james1238 macrumors newbie

    Joined:
    Jan 7, 2016
    #16
    Just to let you know your old code did not work because you have spaces in you class name 'class = "site-nav"' should be 'class="site-nav"'.

    The new selector doesn't reference the class name
     
  17. The_Privy_Life macrumors newbie

    Joined:
    Oct 7, 2015
    Location:
    Eastern Time Zone Area
    #17
    Hello, Im currently a college student in a Web Development class.

    Try,

    {
    list-style-type: none;
    }


    in your code. You may have to do it a different way.

    Ive used this every time and it works.
    Below is my code for a webpage im creating. This is for the nav section im using. Hope i can help.

    nav {
    float: left;
    background-color: grey;
    color: black;
    font: 10px arial;
    border-color: white;
    width: 17%;
    margin-top: 25%;
    border-style: solid;
    border-color:black;
    white-space: overflow;
    }
    nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color:#cccccc;
    color: black;

    }

    nav li a{
    display: block;
    color: black;
    padding: 8px 0 8px 16px;
    text-decoration: none;
    font-style: arial;
    }
     

Share This Page