Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 690
  • Last Modified:

Center menu links on page

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
COwebmaster
Asked:
COwebmaster
  • 9
  • 9
2 Solutions
 
HagayMandelCommented:
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
 
COwebmasterAuthor Commented:
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
 
HagayMandelCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
COwebmasterAuthor Commented:
I tried that but nothing changed... http://www.kitchensofdenver.com/
0
 
HagayMandelCommented:
You did not set the width of 2 elements: 'menu_sociai' div and 'primary' ul to 960px!!
0
 
COwebmasterAuthor Commented:
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
 
HagayMandelCommented:
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
 
COwebmasterAuthor Commented:
Okay, I added that to the header.php file  but still not working... http://www.kitchensofdenver.com/
0
 
HagayMandelCommented:
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
 
COwebmasterAuthor Commented:
I tried that but still no luck
0
 
HagayMandelCommented:
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
 
COwebmasterAuthor Commented:
still doesn't work.
0
 
HagayMandelCommented:
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
 
COwebmasterAuthor Commented:
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
 
HagayMandelCommented:
That's another issue:
It will take me much more time to explain:)
new4.html
0
 
COwebmasterAuthor Commented:
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
 
HagayMandelCommented:
no
0
 
COwebmasterAuthor Commented:
Thanks!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 9
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now