Center Navigation

  • I am developing the site https://www.ragewhispers.com/V2/wordpress and at the top of the page i am trying to center the navigation where it displays: Home, Forum Rage, Whisper Rage, Video Rage, The Zerg, Log In.

    I have done quite alot of unsuccessful modification of the stlyle.css file, and have been unable to center the navigation text.

    The theme i am using is Oblivious by Web2Feel.com

    If anyone could point me in the right direction or tell me what code it is or where the code i need to edit is I would be truly grateful. Thankyou.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    To centre the navigation and generally all block elements, you need first set a width.
    Do you know whether the navigation will expand, will it include more links?

    Thread Starter Spudnic

    (@spudnic072)

    I would believe that the naviagation would grow, and shrink as i further develop the site. At some point it may be static but for now as i add new features i am unsure of howmany more, or less links may be included in the final version.

    I was earlier attempting to use:

    .center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

    But i was unsure as to where i had to implant this in my css to effect the navigation. Examining the page with fire fox did not prvovide much clarity as to where the code for the navigation resided.

    Thanks for your reply and continued support with my issue.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can’t centre your menu without a width, first decide this width.

    Thread Starter Spudnic

    (@spudnic072)

    When i do decide this width, where in my style.css does the navigation reside?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Does your theme come with a Custom CSS or Custom Styles section?

    Thread Starter Spudnic

    (@spudnic072)

    From the dashboard under appereance i have A Theme Options tab, but there is not much to edit in terms of apperance, only some settings that do not effect apperance, and options for widgets.

    In the file editor i have:

    style.css
    comments.css
    sidebar.css

    I am not sure if i have answered, or understand your question.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It’s best to avoid modifying the theme’s original files, as any changes made will erase once the theme updates.

    You could instead create a Child Theme or for simple CSS changes, you could try a Custom Style/CSS plugin.

    Thread Starter Spudnic

    (@spudnic072)

    For what i am trying to accomplish here, and considering my little to no current knowledge of coding css, would you recommend i try and create a child theme or use a css plugin?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The plugin is much easier. You need only install and active it. You are then given an area to enter CSS styles.

    Thread Starter Spudnic

    (@spudnic072)

    I will try that then.

    Thankyou for all your help.

    Thread Starter Spudnic

    (@spudnic072)

    I have installed a custom styles plugin, but i am still having an issue.

    To use the plugin i simply have to add the css code i wish to add to my style, but i still do not know where my theme declares my navigations properties.

    How can i findout where my theme delcares the properties for my navigation?

    Thread Starter Spudnic

    (@spudnic072)

    Here is my style. 

    /**
 * Theme Name:Oblivious
 * Theme URI: www.web2feel.com
 * Description: A stylish gamer wordpress theme from jinsona designs.
 * Author: Jinsona Designs
 * Author URI: https://web2feel.com
 *
 * Copyright (c) 2008 - 2010 web2feel.com.  All rights reserved.
 * https://web2feel.com
 *
 */

@import url('../Oblivious/sidebar.css');
@import url('../Oblivious/comment.css');

html,body,div,span,object,h1,h2,h3,h4,h5,h6,p
,pre,a,abbr,acronym,address,big,cite
,code,del,dfn,em,img,ins,kbd,q,samp,small
,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,
form,label,legend,table,caption,tbody,tfoot,
thead,tr,th,td{
margin:0;
padding:0;
vertical-align:baseline;
outline:none;

}

b,i,hr,u,center,menu,layer,s,strike,font,xmp
{
margin:0;
padding:0;
vertical-align:baseline;
outline:none;
font-size:100%;
font-weight:normal;
font-style:normal;
background:transparent;
border:none;
text-decoration:none
}

font{
color:#333
}

center{
text-align:left
}

body {
	margin:0 auto;
	padding:0px 0px 0px 0px;
	background:#190E02 url(images/body.png) repeat-x;
	font-family:Tahoma,Century gothic, Tahoma,sans-serif;
	color:#161514;
	font-size:13px;
	}

.home{
	background:#190E02 url(images/body.png) repeat-x;
}

a {
	color: #DE0505;
	text-decoration: none;
	}
a:visited {
	color: #DE0505;
	}
a:hover, a:active {
	color: #d54e21;
	text-decoration: none;
	}

h1,h2, h3, h4, h5, h6 {
	line-height:125%;
	font-weight: bold;
	}

h1 {
	font-size: 26px;
	}	

h2 {
	font-size: 21px;
	}
h3 {
	font-size: 19px;
	}
h4 {
	font-size: 17px;
	}
h5 {
	font-size: 15px;
	}
h6 {
	font-size: 13px;
	}

ul {

	list-style: square;
	}

blockquote {
	font-style: italic;
	color:#917d67;
	background:#3F2408;
	padding:10px;
	}
blockquote blockquote {
	color: #777;
	}
blockquote em {
	font-style: normal;
	}

pre {
	padding: 9px;
	background: #f9f9f9;
	border: 1px solid #ccc;
	}
code {
	padding: 0 3px;
	background: #eee;
	}
pre code {
	background: transparent;
	}

.clear {
	clear:both;
	}
img.centered  {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	padding: 0px;
	}

img.alignnone {
	padding: 5px 5px;
	margin: 0px 0px 10px 0px;
	display: inline;
	background:#E4E4E4;
	border: 1px solid #fff;
	}

img.alignright {
	padding: 5px 5px;
	margin: 0px 0px 0px 0px;
	display: inline;
	background:#E4E4E4;

	}

img.alignleft {
	padding: 5px 5px;
	margin: 0px 0px 0px 0px;
	display: inline;
	background:#E4E4E4;

	}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	}

.alignright {
	float: right;
	margin: 0px 0px 10px 10px;
	}

.alignleft {
	float: left;
	margin: 0px 10px 10px 0px;
	}

.wp-caption {
	border: 1px solid #fff;
	text-align: center;
	background-color: #E4E4E4;
	padding: 4px 0px 5px 0px;
	color:#555;
	}

.wp-caption img {
	margin: 0px 0px 5px 0px;
	padding: 0px;
	border: 0px;

	}

.wp-caption p.wp-caption-text {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	font-size: 11px;
	font-weight: normal;
	line-height: 12px;
	}

#masthead{

}

#header{

	height:213px;
	width:1000px;
	overflow:hidden;
	margin:0px auto;
	background:url(images/header.png) no-repeat;

}

.blognames{
	float:left;
	width:500px;
	font-family:Georgia,Tahoma,Century gothic, Tahoma,sans-serif;
}

h1#blog-title{

	font-size:36px;
	padding:60px 0px 0px 40px;
	margin:0px 0px 0px 10px;
	font-weight:bold;
}

h1#blog-title a:link,h1#blog-title a:visited {

	color:#fff;
	text-shadow:1px 1px 1px #000;

}
h2#blog-desc{
	font: 16px Arial,Tahoma,Century gothic,verdana,  sans-serif;
	padding:5px 0px 0px 40px;
	width:400px;
	color:#f87f0c;
	margin:0px 0px 0px 10px;
	text-shadow:1px 1px 1px #0B0302;
	}

/*Page menu*/

#foxmenucontainer{
	height:47px;
	display:block;
	padding:0px 0 0px 0px;
	font: 10px Tahoma, Verdana,Century gothic,sans-serif;
	font-weight:normal;
	text-transform:uppercase;
	width:1000px;
	margin:0px auto;
	}
#menu{
	margin: 0px;
	padding: 0px;
	width:1000px;
	height:47px;
	overflow:hidden;
	}

#menu ul {

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}

#menu li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}

#menu li a, #menu li a:link, #menu li a:visited {
	display: block;
	margin: 0px;
	line-height:47px;
	padding:0px 10px;
	color:#AF5A00;

	}

#menu li a:hover, #menu li a:active {
	background:url(images/menua.png) repeat-x ;
	color: #fff;
    margin: 0px;
	text-decoration: none;
	}

#menu li li a, #menu li li a:link, #menu li li a:visited {

		background: #000;
	width: 150px;
	color:#9F5709;
	font-weight: normal;
	float: none;
	margin: 0px;
	border-bottom: 1px solid #190E02;
	border-right: 1px solid #190E02;
	line-height:30px;
	}

#menu li li a:hover, #menu li li a:active {
	background: #311C05;
	color: #fff;

	}

#menu li ul {
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 170px;
	margin: 0px;
	padding: 0px;
	}

#menu li li {
	}

#menu li ul a {
	width: 140px;
	}

#menu li ul a:hover, #menu li ul a:active {
	}

#menu li ul ul {
	margin: -31px 0 0 170px;
	}

#menu li:hover ul ul, #menu li:hover ul ul ul,
#menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
	left: -999em;
	}

#menu li:hover ul, #menu li li:hover ul,
#menu li li li:hover ul, #menu li.sfhover ul,
#menu li li.sfhover ul, #menu li li li.sfhover ul {
	left: auto;
	}

#menu li:hover, #menu li.sfhover {
	position: static;
	}

#catmenucontainer

{
	display: block;
	font: 10px Tahoma,verdana,Century gothic, Arial, sans-serif;
	font-weight: normal;
	height: 33px;
	padding: 0px 0 0px 0px;
	text-transform: uppercase;
	width:1000px;
	margin:0px auto;
	background:url(images/catmenu.png);

}
#catmenu
{
	width:980px;
	margin: 0px;
	padding: 0px 10px;
	float:left;
}
#catmenu ul
{
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
}
#catmenu li
{
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
}
#catmenu li a, #catmenu li a:link, #catmenu li a:visited
{
	color: #EFB3B3;
	display: block;
	font-weight: normal;
	padding: 0px 10px ;
	line-height:33px;
	text-shadow:1px 1px 1px #222;

}
#catmenu li a:hover, #catmenu li a:active
{
	background:#5F0606;
	color: #fff;
	display: block;
	line-height:33px;

}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited
{
	background:#560404;
	border-bottom: 1px solid #5F0606;
	color: #EFB3B3;
	float: none;
	margin: 0px;
	line-height:33px;
	width: 150px;
}
#catmenu li li a:hover, #catmenu li li a:active
{
	background: #3F0404;
	color: #fff;
	float: none;
	line-height:33px;
	margin: 0px;
	width: 150px;

}
#catmenu li ul
{
	height: auto;
	left: -999em;
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: 170px;
	z-index: 9999;
}
#catmenu li li
{
}
#catmenu li ul a
{
	width: 140px;
}
#catmenu li ul a:hover, #catmenu li ul a:active
{
}
#catmenu li ul ul
{
	margin: -34px 0 0 170px;
}
#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover1 ul ul, #catmenu li.sfhover1 ul ul ul
{
	left: -999em;
}
#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover1 ul, #catmenu li li li.sfhover1 ul
{
	left: auto;
}
#catmenu li:hover, #catmenu li.sfhover1
{
	position: static;
}

#search form {
	margin: 0px 0px 0px 0px;
	padding: 0;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search p {
	margin: 0;
	font-size: 85%;
}

#s {
	width:205px;
	margin:10px 5px 0px 10px;
	padding: 3px 3px;
	height:16px;
	border:none;
	font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;
	color:#fff;
	float:left;
	border:none;
	background:#311C05;
	border:1px solid #3F2408;
	display:inline;
}
input#searchsubmit{
	float:right;
	padding: 3px 5px;
	display:inline;
	margin:10px 10px 0px 0px;
	background:#A60303;
	color:#fff;
	border:none;
}

#wrapper{
	width:1000px;
	margin:0px auto;
}

#casing{
	margin:0px 0px;
	padding-bottom:10px;
	background:#311c05 url(images/casing.png) no-repeat;
}	

#content{
	width:650px;
	padding:20px 0px 10px 0px;
	float:left;
	display:inline;
}

.post {
	margin: 0px 0px 20px 20px;
	padding:5px 5px;
	height: 100%;
	color:#917d67;
	overflow:hidden;
	background:#190E02;
	border:1px solid #3F2408;
	}

.title{
	margin: 0 0 0;
	padding: 0px 0px 0px 0px;

}

.title h2 {
	margin: 0 10px;
	padding: 10px 0px 5px 0px;
	font-weight:bold;
	font-size:24px;
	font-family: Georgia,Myriad Pro,Verdana,Tahoma,sans-serif;	

	}

.title h2 a, .title h2 a:link, .title h2 a:visited  {
	color: #9b774e;

	}
.title h2 a:hover  {
	color: #9b774e;

	}	

.title-meta{

	margin:5px 10px 10px 10px ;
	padding:3px 0px;
	font-size:10px;
	text-transform:uppercase;
	color:#bb690f;
	background:#221302;
	border:1px solid #3c240a;
	}
.author{

	padding:2px 5px;

}
.clock{

	padding:2px 5px;
	margin-left:10px;

}	

.com{
	line-height:16px;
	margin-left:10px;
	padding:2px 5px;

}

.com a:link,
.com a:visited {
	color: #bb690f;

}

.postim{
	float:left;
	margin:5px 10px 5px 0px ;
	background:#5e3d18;
	padding:5px;

}

.postinfo {
	padding: 4px 5px 10px 10px;
	font-size:13px;
	overflow:auto;
			}

.postinfo a {

	color:#5A7516;
	font-weight:normal;
	text-decoration:none;
	}
.postcat{
	float:left;
	padding:0px 0 0 20px;
	color:#66851b;
	background:url(images/tag.png);
	background-repeat:no-repeat;

	}
.postcat a {

	color:#5A7516;
	font-weight:normal;
	text-decoration:none;
	}

.postcover a:link,
.postcover a:visited {
	color: #d07006;
	background-color: transparent;
}

.postcover a:hover {
	color: #fff;
	background-color: transparent;
	text-decoration: none;
}

.postcover {
	margin: 0 0;
	padding: 0px 10px;
	line-height:22px;
	color:#917d67;
	}

.postcover p {
		margin: 5px 0px 10px 0px;
	}
.postcover img{
		max-width:625px;
		height:auto;
	}
.postcover ul{
  margin: .4em 0 1em;
  line-height: 150%;
  list-style:square;
}
.postcover ol{
  margin: .4em 0 1em;
  line-height: 150%;
}

.postcover ul li, .postcover ol li{
  list-style-position:outside;
  margin-left: 1.6em;
}

a.readmore{
	width:88px;
	height:28px;
	display:block;
	margin:10px 0px 0px 10px;
	background:url(images/readon.png) no-repeat;

}

#navigation{
	width:600px;
	padding-left:10px;

}
h2.pagetitle{
	font-size:14px;
	padding:10px 0px;
	font-weight:normal;
	margin-right:10px;
	color:#6F6753;
	text-align:center;

}	

#footer{
	width:100%;
	padding:10px 0px 10px 0px;
	background:#311C05;
	position:relative;
	font-size:10px;
	border-top:1px solid #7F4D17;
	color:#BF915F;
	height:70px;
}
#footer a:link, #footer a:visited{
	color:#BF915F;
}
.fleft{
	float:left;
	text-align:left;
	margin-left:10px;
	margin-top:10px;
	line-height:16px;
}
.fright{
	float:right;
	text-align:right;
	margin-right:10px;
		margin-top:10px;
	line-height:16px;
}

.postad{
	margin:10px;
	float:left;
}

.topad{
	float:right;
	margin:55px 10px 0px 0px;
	width:468px;
	height:60px;

}

#featured{
	height: 350px;
	overflow: hidden;
	position: relative;
	width:1000px;
	padding-top:10px;
	background:url(images/slider.png) bottom no-repeat;
}

#slidearea{
	margin:0px auto;
}

#slidearea ul{
	margin-top:10px;
	list-style:none;
}

.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons { font-size: 0px; padding: 35px 0px 0px 0px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #9F0909; color: #B8C4CF; text-indent: -1000px; background:#5C0503;}
.cs-active { background-color: #000!important; color: #FFFFFF; border-top:1px solid #cc0c0c; border-left:1px solid #cc0c0c; }

.cs-title { width: 850px; padding: 10px; background-color: #000000; color: #FFFFFF; }

.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Use an inspector tool from browsers, such as Google Chrome’s built in Inspect Element, or FireFox’s FireBug add-on tool.

    These tools allow you to view your webpage and right click any element you want to see the HTML and CSS properties of.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Center Navigation’ is closed to new replies.