CSS Navigation menu

AppleDApp · Feb 1, 2016

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

Screen%2BShot%2B2016-02-01%2Bat%2B3.44.27%2BAM.png

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.

Screen%2BShot%2B2016-02-01%2Bat%2B3.52.39%2BAM.png

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

Pakaku · Feb 1, 2016

Code:

   ul
   {
     padding:0;
   }

   ul li
   {
     display: inline-block;
   }

That's usually all I have to do.

AppleDApp · Feb 1, 2016

That did not change anything.

Strider64 · Feb 1, 2016

to get rid of bullet points

Code:

ul {
  list-style: none;
}

BrumGB · Feb 1, 2016

Post your html.

The code that you posted should work if the HTML markup is correct.

https://jsfiddle.net/rd1w6wp3/

AppleDApp · Feb 2, 2016

BrumGB said:
Post your html.

The code that you posted should work if the HTML markup is correct.

https://jsfiddle.net/rd1w6wp3/

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 -->

olup · Feb 2, 2016

AppleDApp said:

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 -->

You can find your output by right clicking in the browser window -> view page source, that'll show the HTML that's output.

AppleDApp · Feb 2, 2016

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>

olup · Feb 2, 2016

AppleDApp said:

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>

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/

AppleDApp · Feb 5, 2016

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.

Efrem · Feb 5, 2016

AppleDApp said:
...I already have

Code:

ul {list-style: none;}

to remove the bullets. Despite that the bullets are still present.

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.

AppleDApp · Feb 6, 2016

Efrem said:
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.

Code:

.site-nav ul li {
    list-style: none;
    float: left;
    }

Does this code not remove the list style for both li and ul levels?

AppleDApp · Feb 18, 2016

I have yet to find a fix for this.

olup · Feb 18, 2016

AppleDApp said:
I have yet to find a fix for this.

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

AppleDApp · Feb 19, 2016

olup said:
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

Thank you

james1238 · Feb 20, 2016

AppleDApp said:
Thank you

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

The_Privy_Life · Feb 23, 2016

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;
}

Search

Search

CSS Navigation menu

AppleDApp

macrumors 68020

Pakaku

macrumors 68040

AppleDApp

macrumors 68020

Strider64

macrumors 68000

BrumGB

macrumors newbie

AppleDApp

macrumors 68020

olup

Cancelled

AppleDApp

macrumors 68020

olup

Cancelled

AppleDApp

macrumors 68020

Efrem

macrumors regular

AppleDApp

macrumors 68020

AppleDApp

macrumors 68020

olup

Cancelled

AppleDApp

macrumors 68020

james1238

macrumors newbie

The_Privy_Life

macrumors newbie

Our Staff