Jump to content


Photo

need to center the menu and the drop downbox

menu drop down box nav bar top header center

  • Please log in to reply
7 replies to this topic

#1 Jinfiltration

Jinfiltration

    Member

  • Members
  • PipPip
  • 13 posts
  • Country: Country Flag

Posted 09 October 2013 - 02:58 PM

Hi,

 

I need to center the words in the menu bar and the dropdown box, may i know where should i edit in CSS?

 

i did some edit on the css file, i finally moved the dropdown box to almost center, but i couldnt move the word in the menu to the center.

 

h3EumyB.jpg



#2 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 09 October 2013 - 03:15 PM

Hi @Jinfiltration - Is that the navbar you're using for your menu? If so, try adding the following to center the dropdown items:

 

body .dropdown-menu li > a, body .dropdown-menu li > span {text-align: center;}



#3 Jinfiltration

Jinfiltration

    Member

  • Members
  • PipPip
  • 13 posts
  • Country: Country Flag

Posted 09 October 2013 - 03:33 PM

Hi @Jinfiltration - Is that the navbar you're using for your menu? If so, try adding the following to center the dropdown items:

 

body .dropdown-menu li > a, body .dropdown-menu li > span {text-align: center;}

 

sorry, i dont get it, i just started learning css, may i know from the code below where should i edit or add to make all the words in the bar and the dropdown box to be center.

 
/* @ Main Nav */
		.main_nav {			
			line-height: 1.1em;
			text-align: left;
			margin-top: 0px;
			z-index:28;  /* Fancybox Uses 30 */
			position:relative;
		}
		
		.main_nav .content-pad{
			padding-top: 6px;
		}
			.main_nav ul{
				list-style: none;
				display: block;
				margin: 0px 0px 0px 180px;
				padding: 0px;
				float: left;
			}
			.main_nav li{position:relative;}
			.main_nav ul li{
				margin: 0px 0px 0px 20px;
				padding: 0px;
				float: left;
				text-align: right;
			}
			.main_nav li a{		
				
				padding: 10px 15px 10px;
				text-decoration: none;
				display: block;
				border: 1px solid transparent;
				border-bottom:none;
					
			}
			
			.main-nav li a{
				font-size: 1.2em; 
			}
			
			/*IE6 border color (transparent border fix)*/
			*html .main_nav li a{ border-color: white; }
	
			/* Drop Down */
			.main_nav ul ul {display: none;}
			.main_nav ul ul li {text-align: left;}
		
			/* @ SubNav Area */
			#secondnav {
				line-height: 1.1;
				font-size: .7em; 
			}
				#secondnav ul{
					line-height: .95em;
					list-style:none;
					margin:0;
					
				}
				#secondnav .secondnav_menu { margin:0 0 0 0px; }
				#secondnav ul li{float: left;}
				#secondnav li a{
					display: block;
					padding: 10px 10px; 
					border:none;
				}


#4 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 09 October 2013 - 04:36 PM

Hi @Jinfiltration - I think you've posted in the wrong forum so I'm sorry for the confusion with the code I provided. But looking at your code, I'd advise you try tweaking the following under /* Drop Down */ where it currently says "left": .main_nav ul ul li {text-align: center;} If that doesn't do the trick, could you provide a link to the site?

#5 Jinfiltration

Jinfiltration

    Member

  • Members
  • PipPip
  • 13 posts
  • Country: Country Flag

Posted 09 October 2013 - 04:47 PM

Hi @Jinfiltration - I think you've posted in the wrong forum so I'm sorry for the confusion with the code I provided. But looking at your code, I'd advise you try tweaking the following under /* Drop Down */ where it currently says "left": .main_nav ul ul li {text-align: center;} If that doesn't do the trick, could you provide a link to the site?

 

yes, sure. my website is http://69.195.124.132/~myownlo1/



#6 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 09 October 2013 - 04:57 PM

Hi @Jinfiltration - Thanks for the link. I believe the code I provided should do the trick with centering the text in the dropdown menu. .main_nav ul ul li {text-align: center;}

#7 Jinfiltration

Jinfiltration

    Member

  • Members
  • PipPip
  • 13 posts
  • Country: Country Flag

Posted 09 October 2013 - 05:16 PM

Hi @Jinfiltration - Is that the navbar you're using for your menu? If so, try adding the following to center the dropdown items:

 

body .dropdown-menu li > a, body .dropdown-menu li > span {text-align: center;}

 

Sorry 1 more question,

 

5YjFoTN.png



#8 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 09 October 2013 - 05:39 PM

Try adding this custom code to move the menu over a bit: #primary-nav ul.main-nav {margin-left: 225px;}
  • Jinfiltration likes this





Also tagged with one or more of these keywords: menu, drop, down, box, nav, bar, top, header, center