How can I make my menu scale full-width?


I am trying to get my responsive menu to scale proportionately between the 960 myco-ee.PNGpixels to 768 pixel widths.
The menu is fine between the large desktop version and the smaller mobile.  

The client requires that the menu remain consistently centered, as it appears in the desktop version.

I have attached a screenshot of the page with the menu issue.
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
The simplest thing would be to set the list-items widths to something close to "17.5%". However, CSS Tables (e.g. "display:table") are a wonderful thing.
#menu {
	border-spacing: 15px 0;
	display: table;
	left: 5px;
	position: absolute;
	right: 5px;
	top: 75%;
	/*width: 960px;*/
	z-index: 5;
#menu .nav-pills {
	display: table-row;
#menu .nav-pills::after, #menu .nav-pills::before {
	display: none;
#menu .nav-pills > li {
	display: table-cell;
	float: none;

Open in new window

P.S. 960px seems rather narrow for a max-width these days. Most of my recent projects have been using 1170px.
Marco GasiFreelancerCommented:
I suggest to modify your style.css as follows:

style.css line 148: avoiding the text Request a quote exceeds its button's limits
      font-size: .9em;

style.css line 184: this centers the nav in every resolution
.nav-pills > li {
  margin-right: 15px;
  display: inline-block;
  float: none; //overwrites bootstrap styles

style.css line 517: sizes button correctly at specific resolution
@media screen and (max-width: 960px) and (min-width: 768px){
            width: 155px;

With this rules, resizing the browser the menu remains consistent.
tiabradford1984Author Commented:

Thank you for your responses.  Sorry for the delay I was out for the holiday.

I did originally have the site wider for more modern monitors, but the client required a pixel perfect representation of the photoshop layout file they sent me.  The buttons would have been much larger than their design, needing to go full-width.

I have been trying both techniques but seem to keep running into the same/similar issue when going between 960-768px.  Attached is a screenshot.  

I need to show the client the site tomorrow, so I had to move the mobile menu to display at 960px instead of the prior 767px.

I will keep at it though, as I'm sure this will be a need for me in the near future.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

David S.Commented:
The first screenshot looks like the width:960px wasn't removed from #menu. Perhaps you added the rules I posted at the end of your stylesheet and didn't add a declaration to override that value in the previously existing rule?

The second screenshot could be caused by multiple things. Which of the 3 suggested solutions was that of?

You might want to also decrease the left and right padding on "#menu .nav>li>a".

Some say that pixel perfection died with the advent of responsive design. Unfortunately, many graphic designers and clients haven't gotten the message.
tiabradford1984Author Commented:
I could not agree with you more it can be frustrating.  I will make a separate page where I can re-tryout the solutions.  I will report back shortly.

greetings tiabradford1984, , your menu design has no responsive properties, it's static, unchanging. First it is set up to a fixed width as -
     #menu { width: 960px;}

then it is divided in 5 items widths (fixed) -
     .menuButton { width: 170px;}

you can try and remove the   width: 960px;   from the  #menu    and then try to set the    .menuButton   to     width: 19.3%;
but you will have to see if this gives a flexible responsive, and you will need to CUSTOM set the browser width where it needs to drop into the mini mobil menu three-bar
tiabradford1984Author Commented:
I was able to achieve what I needed by using the following:

#menu {
    position: absolute;
    top: 75%;
    z-index: 5;
    width: 960px;
    left: 20px;
    right: 0;
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
.navbar-collapse {
    padding-right: 0px;
    padding-left: 0px;

Open in new window

<div id="menu" class="navbar-collapse collapse">
                        <ul class="nav nav-pills">
                            <li class="menuButton menu"><a href="/about-us.cfm">About Us</a>
                            <li class="menuButton menu"><a href="/capabilities.cfm">Capabilities</a>
                            <li class="menuButton menu"><a href="/submit-a-file.cfm">Submit a File</a>
                            <li class="menuButton menu"><a href="/request-a-quote.cfm">Request A Quote</a>
                            <li class="menuButton menu"><a href="/contact-form.cfm">Contact Us</a>
                            <div id="newsletter-menu" class="col-md-3 subscribe">
                                <p>Enewsletter Signup
                                <form action="sign-up.cfm" id="thing-alerts" method="post">
                                    <div style="overflow: hidden; padding-right: .5em;">
                                            <input name="email" value="EMAIL ADDRESS" style="width: 100%;" type="text">
                                    <input name="search" value="Go" style="float: right" type="submit">

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tiabradford1984Author Commented:
Made adjustments according to clients requirements.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.