bill.boyles

this may be a dumb questions, but as my dad always says dumb questions are the ones you don’t ask, so bear with me here as i am trying to learn…
assuming i wanted three sidebars in this theme, and wanted to position one right, one left, and one on the bottom, would i really need to strip out the old sidebars and create new ones? couldn’t i just use the CSS to move the existing sidebars to the positions i wanted?

finally fixed the code. here is all the code fixed so nothing overlaps and it all looks decent:

.navbar {
	width: 100%;
	height: 30px;
	background-color: #593929;
	top: 0px;
	z-index: 100;
	padding: 0px;
	margin: 0px;
	border-top: 2px solid #422619;
}
.searchbar {
	float: right;
	padding-top: 4px;
	padding-bottom: 4px;
}
.searchbar input[type="text"] {
	width: 100px;
}
#searchform #searchsubmit {
	width: 22px;
	height: 22px;
	border-radius: 16px;
	border: 0px none;
	border-bottom: 0px solid rgba(51,51,51,.2);
	border-right: 2px solid rgba(51,51,51,.2);
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	padding: 0px;
	color: #fff;

sorry for all the posts. if i could find a way to edit old posts i would have just done that. hope this helps everyone!

actually i was viewing it wrong so the above code padding fix doesn’t work. it looked like it did when i was logged in, but when i was logged out it didn’t. for some reason i cant seem to delete or edit the comment.

it may also behoove you to add some padding to the top so the menu does not overlap the header. i accomplished it thusly:
change the line from

padding: 0px;

to

padding: 10px 0px 20px;

this will add a 10px padding to the top, 0px to the left and right, and 20px to the bottom to space it off the main body. if you wish to have the header touching the main body do this instead:

padding-top: 10px;

hope this all helps!

to see what my site now looks like with these changes, see https://www.billboyles.info

an easy way to move the navbar to the top:
(this is best done with a child theme so that future updates won’t erase it, but you could just do it in the original CSS and then never update.)

find this line of code (starts at line 897):

.navbar {
	width: 100%;
	background-color: #593929;
	bottom: 0px;
	z-index: 100;
	padding: 0px;
	margin: 0px;
	border-top: 2px solid #422619;

change “bottom” to “top” in line 900
it should now look like this:

.navbar {
	width: 100%;
	background-color: #593929;
	top: 0px;
	z-index: 100;
	padding: 0px;
	margin: 0px;
	border-top: 2px solid #422619;

that’s it!
one note: it may appear the navbar disappears while you are logged into wordpress. this is due to the small top navbar from wordpress that drops down actually covering the very top of the site and thus the theme navbar. log out of wordpress and you will be able to see the navbar has moved to the top!