?
Solved

Center menu links on page

Posted on 2013-02-02
18
Medium Priority
?
685 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 2000 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
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.

 

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 2000 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

Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

Question has a verified solution.

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

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.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

718 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