Mike Waller
asked on
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?
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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
1. make the ul 'primary' width = 960px
2. use jQuery for 3 instructions:
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');
ASKER
I tried that but nothing changed... http://www.kitchensofdenver.com/
You did not set the width of 2 elements: 'menu_sociai' div and 'primary' ul to 960px!!
ASKER
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></l i>
<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/facebo ok-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/twitte r-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/youtub e-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/google plus-sm.pn g" 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','7 px');
jQuery('#primary li:first').css('margin-lef t','0px');
jQuery('#primary li:last').css('margin-righ t','0px');
Still, the menu links are left in center nor social media buttons right in center. Any ideas?
<div id "menu_social" style="width:960px;margin:
<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></l
<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/facebo
<li><a href="http://twitter.com/sanderandsons" title="Twitter" target="_blank"><img src="/images/social/twitte
<li><a href="http://www.youtube.com/user/sanderandsons" title="You Tube" target="_blank"><img src="/images/social/youtub
<li><a href="#" title="Google Plus" target="_blank"><img src="/images/social/google
</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','7
jQuery('#primary li:first').css('margin-lef
jQuery('#primary li:last').css('margin-righ
Still, the menu links are left in center nor social media buttons right in center. Any ideas?
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>
ASKER
Okay, I added that to the header.php file but still not working... http://www.kitchensofdenver.com/
You must have a jQuery conflict:
Replace the script content with this.
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');
});
And you forgot the semicolon at the end!!
ASKER
I tried that but still no luck
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
still doesn't work.
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
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
ASKER
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/
ASKER
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.
no
ASKER
Thanks!
ASKER