Skip to:
Content
Pages
Categories
Search
Top
Bottom

Re: How to Add custom Nav Bar to Theme?


chrishajer
Participant

@chrishajer

Sorry, lost this topic.

Looks like you have a button already, it’s just in the wrong spot.

1. Make sure your HTML tags are lowercase. This is what you have now:

<FORM METHOD="LINK" ACTION="http://ashb.proofreadercentral.com/">
<INPUT TYPE="submit" VALUE="ASHB Home">
</FORM>

 

Should be more like:

<form method="link" action="http://ashb.proofreadercentral.com/">
<input type="submit" value="ASHB Home" />
</form>

 

2. To have control over that, I would put it in a div, and give it a CSS id or class. Something like this:

<div id="navbar">
<form method="link" action="http://ashb.proofreadercentral.com/">
<input type="submit" value="ASHB Home" />
</form>
</div>

 

3. Now, with an id, you can make some modifications to your style.css. Something like this (add it right around the lines for the #header, since you’re still in the #header div):

#navbar {
position: relative;
/* top: {number of pixels from the top of the header}; */
/* left: {number of pixels from the left edge of the header}; */
top: 100px;
left: 0px;
}

 

Try different numbers in your style.css for the #navbar top and left positions you just added, and see where the button ends up. I’m not sure where you want it, but that will allow you to move it.

If you want it beneath what is inside the header div, with the background image, you will have to move the code out of the #header div in header.php.

Does that help point you in the right direction?

Skip to toolbar