WordPress.org

Ready to get started?Download WordPress

Forums

[P2] How to add a menu? (4 posts)

  1. Webbimperiet
    Member
    Posted 4 years ago #

    Hi everyone,
    I'm using the P2 theme on my new blog Zlatanfan.com. Everything works fine except for the menu that I would like to include. The menu should grab and show the different pages from my blog.

    Any suggestion of a nice and clean menu for this theme? And what I need to add in the CSS as well.

    Kind regards,
    Daniel Bergstrom

  2. MAD000
    Member
    Posted 4 years ago #

    Hi Daniel,
    you can use the following script for the pages menu:

    <div id="my-menu">
    <?php wp_page_menu('show_home=1'); ?>
    </div><!-- my-menu ends -->

    The above code will show a menu of all blog pages including home page.

    The css for this depends on your theme color and sizes, but try this:

    #my-menu {
    	float: left;
    	width: 1020px;
    	height: 35px;
    }
    
    #my-menu .current_page_item {
    	background-color: lightred;
    }
    
    #my-menu li:hover {
    	background-color: darkblue;
    }
    
    #my-menu li {
    	float: left;
    	list-style: none;
    	font-family: Verdana;
    	font-size: 14px;
    	text-align: center;
    	height: 28px;
    	padding-top: 7px;
    	padding-left: 5px;
    	padding-right: 5px;
    }
    
    #my-menu a {
    	text-decoration: none;
    	color: #8D95CD;
    }

    [signature moderated Please read the Forum Rules]

  3. Webbimperiet
    Member
    Posted 4 years ago #

    Hi Mad,
    Appricate your code. I'm having some problems with the menu as you can see on zlatanfan.com. I want it in the middle but can't figure out how I change that in the CSS. I'm more or less a newbie in terms of CSS but at least I know the html and how to edit the different files ;).

    Appreciate your help!

    Kind regards,
    Daniel

  4. MAD000
    Member
    Posted 4 years ago #

    Daniel,
    use the following css to style your menu:

    #my-menu {
    	background: transparent url('images/bg_mainmenu.jpg');
    	width: 1124px;
    	height: 35px;
    text-align: center;
    }
    
    #my-menu .current_page_item {
    	background-color: black;
    }
    
    #my-menu li:hover {
    	background-color: white;
    }
    
    #my-menu ul {
    padding: 7px;
    }
    
    #my-menu li {
    display: inline;
    	list-style: none;
    	font-family: Verdana;
    	font-size: 14px;
    	text-align: center;
    	padding: 7px;
    }
    
    #my-menu a {
    	text-decoration: none;
    	color: black;
    }

    This should display the menu in the center.

    MAD from http://flashjourney.com/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags