Solved

Center menu links on page

Posted on 2013-02-02
18
660 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will learn how to dynamically set the form action using jQuery.

821 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