Create Horizontal Nav-Bar

  • Hi,
    Website: https://www.somewhereny.com
    I want to create a navigation bar across the top of my site that is centered and simply states the categories of my post. When clicked on would only show my posts. I folled this instruction sheet, https://codex.www.ads-software.com/Creating_Horizontal_Menus, but as you can see from my site the labels are not arranged horizontally and show other things along with the catagories.

    Does anyone know how to change this?
    Thanks!

    Brief Synopsis of what I have done;
    I inserted this into my header.php

    <div id="navmenu">
<ul>
	<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
	<li><a href="wordpress/recipes/">RECIPES</a></li>
	<li><a href="wordpress/travel/">TRAVEL</a></li>
	<li><a href="https://www.www.ads-software.com">WORDPRESS</a></li>
</ul>
</div>

    And this into my style.css

    #navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none;  margin: 4px;
	padding: 5px 20px 5px 20px; color: blue;
	background: pink;}
#navmenu ul li a:hover {color: purple;
	background: yellow; }

Viewing 3 replies - 1 through 3 (of 3 total)

  • I inserted this into my header.php

    not really;
    from the result in your site, i deduct that you inserted:

    <div id="navmenu">
<ul>
	<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
	<?php wp_list_categories('title_li='); ?>
	<li><a href="https://www.www.ads-software.com">WORDPRESS</a></li>
</ul>
</div>

    (you need the 'title_li=' which suppresses the ‘category’ name and keeps the list simple)

    try the above code.

    Thread Starter atlantiscanyon

    (@atlantiscanyon)

    Thanks,
    You were right and I changed my code and added ‘title_li=’, yet there is one problem. I have posts with 5 categories, but it is only showing a maximum of 3 categories?? and is there anyway of arranging the categories for aesthetic purposes?

    mybe you need to add this on your CSS

    #navmenu ul li a {

    text-decoration:none;
    margin: 4px;
    padding: 5px 20px 5px 20px;
    color: blue;
    float:left;
    background: pink;}

    look at “FLOAT:LEFT”

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Create Horizontal Nav-Bar’ is closed to new replies.