Solved

Center menu links on page

Posted on 2013-02-02
18
649 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
  • 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
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…

815 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now