Posted 3 years ago #
Hi, I want to do 2 things: - change the position of the page links : "home" and "about" from up there to where i point in the picture .
- can i make my category also show up in a bar near the Home and About?
The Image
What do i need to do or change ?
I await you answer thank you .
you need to rearrange your xhtml and edit your css,
Posted 3 years ago #
Yes.. but where exactly .. what files and what line code,,
Posted 3 years ago #
At least help me with the first thing please , the position change .. i really need that change..
Posted 3 years ago #
Here's what I would look at...
Pages Menu
Look in your header.php. Find the lines of code that specify the pages menu in the upper right of your displayed header. They will most likely look like this, and may be at the top of the lines below the <head> section:
<div id="menu">
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>Back up the entire contents of header.php so you can go back if things don't work out.
Cut and paste this code to the bottom of the lines below the <head>, above the last </div>.
The <div>,
If floated to the right, you want to float it to the left. Margins or padding may need to be changed or adjusted to make it look right. This is done with the values in the stylesheet. Again, make a backup so you can go back if things don't work out.
Categories Menu
If everything goes right, you can add the categories to the menu. To do that you add this function, `<?php
wp_list_categories('title_li='); ?>`. The entire menu code would be like below:
<div id="menu">
<ul>
<?php wp_list_pages('title_li='); ?>
<?php wp_list_categories('title_li='); ?>
</ul></div>`
If everything works to satisfaction, you can then delete or comment-out the menu in the upper right.
Okay, this is just an example, and your code in your header.php and style.css is probably different. It may be confusing. So, you may want to start with the WordPress documentation here, specifically "Design and Layout".
Good luck!
Posted 3 years ago #
Here's what I would look at...
Pages Menu
Look in your header.php. Find the lines of code that specify the pages menu in the upper right of your displayed header. They will most likely look like this, and may be at the top of the lines below the <head> section:
<div id="menu">
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>Back up the entire contents of header.php so you can go back if things don't work out.
Cut and paste this code to the bottom of the lines below the <head>, above the last </div>.
The <div>, <ul>, and <li> are listed in your stylesheet (most likely style.css) for the appropriate id's or classes, and determine how the menu looks and how it's postioned. It's probably floated to the right with no margin.
If floated to the right, you want to float it to the left. Margins or padding may need to be changed or adjusted to make it look right. This is done with the values in the stylesheet. Again, make a backup so you can go back if things don't work out.
Categories Menu
If everything goes right, you can add the categories to the menu. To do that you add this function, `<?php
wp_list_categories('title_li='); ?>`. The entire menu code would be like below:
<div id="menu">
<ul>
<?php wp_list_pages('title_li='); ?>
<?php wp_list_categories('title_li='); ?>
</ul>
</div>If everything works to satisfaction, you can then delete or comment-out the menu in the upper right.
Okay, this is just an example, and your code in your header.php and style.css is probably different. It may be confusing. So, you may want to start with the WordPress documentation here, specifically "Design and Layout".
Good luck!
Note: This is the same as above but some typos were corrected...
Posted 3 years ago #
well . my header under the </head> looks something like this :
</head>
<body>
<div id="container"><div id="header">
<div id="title">"><?php bloginfo('name'); ?>
<div id="tagline"><?php bloginfo('description'); ?></div>
</div></div>
<div id="navigation">
<li class="page_item">">Home
<?php wp_list_pages('depth=1&title_li='); ?></div>
I searched the .css for div, ul, li but didint found anything that would suggest that it is allined at the right side ..
I will post here all the results for div, ul ,li :
div#title {
font-size:3.5em;
margin-top:30px;
float: left;
}div#title a {
color:#fff;
}#sidebar div.title {
margin-top: 5px;
font-size: 1.1em;
color: #333;
font-weight: bold;
margin-bottom:10px;
}
ol, ul {
list-style: none;
}
ul, ol {
line-height:2;
margin-bottom:2em;
}
ul {
list-style:inside disc;
}
#sidebar ul {
list-style:none;
}
ul li, ol li {
margin-bottom:5px;
}
#navigation ul {
list-style-type:none;
list-style-image:none;
position:absolute;
top:0;
right:0;
z-index:99;
}
#navigation li { float: left; }#navigation li a:link,
#navigation li a:visited
{
float: left;
color: #fff;
display: block;
padding: 10px 10px;
font-size: 1em;
}#navigation li a:hover,
#navigation li a:active
{
color:#fff;
background-image:url(images/nav-bg.gif);
background-repeat:repeat-x;
}#navigation li.active a
{
color: #555;
background-color: #fff;
}
.commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #69c;
}
Posted 3 years ago #
Okay, this will be much easier since the navigation menu that we want to move is "absolutely positioned". Absolute positioning means you can fix an element's location on your page regardless of what the other elements do.
So, you want to change your code in this part of the style sheet to be as follows:
#navigation ul {
list-style-type:none;
list-style-image:none;
position:absolute;
bottom:0; /* We changed this so the menu sits at the header's bottom */
left:0; /* We changed this so the menu is on the header's left */
z-index:99;
}This should put the menu at the bottom, left of the header.
Now, for adding the Categories to the menu. You want to add the <?php wp_list_categories('title_li='); ?> tag to the header.php. So, the changed code should be as follows:
<div id="navigation">
<li class="page_item">">Home
<?php wp_list_pages('depth=1&title_li='); ?>
<?php wp_list_categories('title_li='); ?> /* This is added */
</div>If you want the word "Categories" to show before your category links, you can modify the tag as shown here (or for that matter, go here if you want the word "Pages" to go before your page links).
There you go! You may still have to do some styling to margins or padding, but you're on the right track.
Posted 3 years ago #
I cant thank you enough , I made it and it looks like I wanted to.
Thank you again for your time !
This topic has been closed to new replies.
