Solved

Center menu links on page

Posted on 2013-02-02
18
676 Views
Last Modified: 2013-02-04
I have a site here: http://www.kitchensofdenver.com/ and need to center and align the top menu nav links so that it aligns with the content area.  Also, on the right side of the menu bar where the social media buttons should align to the right of the centered sidebar area.

So the whole menu bar background is full width like I have it but the menu link and social buttons should be centered on the page.

Any ideas experts?
0
Comment
Question by:COwebmaster
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 9
18 Comments
 
LVL 16

Accepted Solution

by:
HagayMandel earned 500 total points
ID: 38848087
You need to insert the ul 'primary' and the div 'social' into a centered div within the containing div 'menu'. Furthermore, you can add the social items as list items to the original ul:

<div id="menu" class="clearfix">
<div id "menu_social" style="width:900px;margin:auto;">
					<ul id="primary" class="nav sf-js-enabled"><li id="menu-item-737" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-737"><a title="Home" href="/">Home</a></li>
<li id="menu-item-997" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-997"><a title="Kitchen/Bath Cabinetry" href="http://www.kitchensofdenver.com/cabinetry/">Kitchen/Bath Cabinetry</a></li>
<li id="menu-item-996" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-996"><a title="Countertops" href="http://www.kitchensofdenver.com/countertops/">Countertops</a></li>
<li id="menu-item-995" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-995"><a title="Remodel Process" href="http://www.kitchensofdenver.com/remodel-process/">Remodel Process</a></li>
<li id="menu-item-998" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-998"><a title="Portfolio" href="http://www.kitchensofdenver.com/portfolio/">Portfolio</a></li>
<li id="menu-item-735" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-735"><a title="Our Story" href="http://www.kitchensofdenver.com/our-story/">Our Story</a></li>
<li id="menu-item-744" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-744"><a title="Contact Us" href="http://www.kitchensofdenver.com/contact-us/">Contact Us</a></li>
<li id="menu-item-1005" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1005"><a href="http://www.kitchensofdenver.com/our-blog/">Blog</a></li>
<li><a href="https://www.facebook.com/SanderAndSons" title="Facebook" target="_blank"><img src="/images/social/facebook-sm.png" border="0" width="32" height="32" alt="Facebook"></a></li>
<li><a href="http://twitter.com/sanderandsons" title="Twitter" target="_blank"><img src="/images/social/twitter-sm.png" border="0" width="32" height="32" alt="Twitter"></a></li>
<li><a href="http://www.youtube.com/user/sanderandsons" title="You Tube" target="_blank"><img src="/images/social/youtube-sm.png" border="0" width="32" height="32" alt="You Tube"></a></li>
<li><a href="#" title="Google Plus" target="_blank"><img src="/images/social/googleplus-sm.png" border="0" width="32" height="32" alt="Google Plus"></a></li>
</ul>			
<div>
....

Open in new window

0
 

Author Comment

by:COwebmaster
ID: 38848863
okay, that centered the links but how do I make it so that the menu links are left aligned with the left side of the slider and the social buttons to the right side of the sidebar?  http://www.kitchensofdenver.com/
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38848933
1. make the ul 'primary' width = 960px
2. use jQuery for 3 instructions:
jQuery('#primary li').css('margin-right','7px');
jQuery('#primary li:first').css('margin-left','0px');
jQuery('#primary li:last').css('margin-right','0px');

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:COwebmaster
ID: 38849425
I tried that but nothing changed... http://www.kitchensofdenver.com/
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38849993
You did not set the width of 2 elements: 'menu_sociai' div and 'primary' ul to 960px!!
0
 

Author Comment

by:COwebmaster
ID: 38851382
actually, i did.  I have:

<div id "menu_social" style="width:960px;margin:auto;">
<ul id="primary" width="960px;" class="nav sf-js-enabled">
<li id="menu-item-737" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-737"><a title="Home" href="/">Home</a></li>
<li id="menu-item-997" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-997"><a title="Kitchen/Bath Cabinetry" href="http://www.kitchensofdenver.com/cabinetry/">Kitchen/Bath Cabinetry</a></li>
<li id="menu-item-996" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-996"><a title="Countertops" href="http://www.kitchensofdenver.com/countertops/">Countertops</a></li>
<li id="menu-item-995" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-995"><a title="Remodel Process" href="http://www.kitchensofdenver.com/remodel-process/">Remodel Process</a></li>
<li id="menu-item-998" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-998"><a title="Portfolio" href="http://www.kitchensofdenver.com/portfolio/">Portfolio</a></li>
<li id="menu-item-735" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-735"><a title="Our Story" href="http://www.kitchensofdenver.com/our-story/">Our Story</a></li>
<li id="menu-item-744" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-744"><a title="Contact Us" href="http://www.kitchensofdenver.com/contact-us/">Contact Us</a></li>
<li id="menu-item-1005" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1005"><a href="http://www.kitchensofdenver.com/our-blog/">Blog</a></li>
<li><a href="https://www.facebook.com/SanderAndSons" title="Facebook" target="_blank"><img src="/images/social/facebook-sm.png" border="0" width="32" height="32" alt="Facebook"></a></li>
<li><a href="http://twitter.com/sanderandsons" title="Twitter" target="_blank"><img src="/images/social/twitter-sm.png" border="0" width="32" height="32" alt="Twitter"></a></li>
<li><a href="http://www.youtube.com/user/sanderandsons" title="You Tube" target="_blank"><img src="/images/social/youtube-sm.png" border="0" width="32" height="32" alt="You Tube"></a></li>
<li><a href="#" title="Google Plus" target="_blank"><img src="/images/social/googleplus-sm.png" border="0" width="32" height="32" alt="Google Plus"></a></li>
</ul>

You can see both elements set to 960 pixels.  i also placed this in the bottom of the style.css file:

jQuery('#primary li').css('margin-right','7px');
jQuery('#primary li:first').css('margin-left','0px');
jQuery('#primary li:last').css('margin-right','0px');

Still, the menu links are left in center nor social media buttons right in center. Any ideas?
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38852153
You can see both elements set to 960 pixels.  i also placed this in the bottom of the style.css file:

This is JavaScript,not CSS!!!
You need to add a script to the file (to the head section or to the body section):

<script type="text/javascript">
$(document).ready(function() {
$('#primary li:first').css('margin-left','0px');
$('#primary li:last').css('margin-right','0px');
$('#primary li').css('margin-right','7px');
})
</script>

Open in new window

0
 

Author Comment

by:COwebmaster
ID: 38852193
Okay, I added that to the header.php file  but still not working... http://www.kitchensofdenver.com/
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38852252
You must have a jQuery conflict:
Replace the script content with this.
jQuery (document).ready(function() {
jQuery ('#primary li:first').css('margin-left','0px');
jQuery ('#primary li:last').css('margin-right','0px');
jQuery ('#primary li').css('margin-right','7px');
});

Open in new window

And you forgot the semicolon at the end!!
0
 

Author Comment

by:COwebmaster
ID: 38852297
I tried that but still no luck
0
 
LVL 16

Assisted Solution

by:HagayMandel
HagayMandel earned 500 total points
ID: 38852343
Coding can be pain in the ...

The extra gap should be omitted:

jQuery(document).ready(function() {
jQuery('#primary li:first').css('margin-left','0px');
jQuery('#primary li:last').css('margin-right','0px');
jQuery('#primary li').css('margin-right','7px');
});
0
 

Author Comment

by:COwebmaster
ID: 38852503
still doesn't work.
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38852560
The issue is with the location of the script.:
In your file, the jquery.js script resides at the bottom of the body tag,  therefore any script that wants to use jQuery, must be inserted after!
new2.html
0
 

Author Comment

by:COwebmaster
ID: 38852608
Okay, that seemed to have worked.  however, the social buttons are in their own <li> and how do I add make it so that those are to the right of the sidebar area?  http://www.kitchensofdenver.com/
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38852910
That's another issue:
It will take me much more time to explain:)
new4.html
0
 

Author Comment

by:COwebmaster
ID: 38852922
Okay, so do I change something in the css or php file to do that?  Yes your example html file is what I was referring to.
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38852929
no
0
 

Author Closing Comment

by:COwebmaster
ID: 38853605
Thanks!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
PHP processing webform 25 45
css messed up 8 30
Select Query Fails in PHP but not in TERMINAL Mysql 9 33
How can I use javascript variable in mysql query 21 46
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question