WordPress.org

1. Webbimperiet
   Member
   Posted 2 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 2 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 2 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 2 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.