How can I make my menu scale full-width?

Hello,

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.  

http://mycomolding.com/home.html

I have attached a screenshot of the page with the menu issue.
tiabradford1984Asked:
Who is Participating?
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.
0
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
.menuButton{
      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){
      .menuButton{
            width: 155px;
      }
}

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

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.
ee1.PNG
ee2.PNG
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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.
0
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.

Tia
0
Slick812Commented:
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
0
tiabradford1984Author Commented:
http://www.mycomolding.com
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>
                            <li class="menuButton menu"><a href="/capabilities.cfm">Capabilities</a>
                            </li>
                            <li class="menuButton menu"><a href="/submit-a-file.cfm">Submit a File</a>
                            </li>
                            <li class="menuButton menu"><a href="/request-a-quote.cfm">Request A Quote</a>
                            </li>
                            <li class="menuButton menu"><a href="/contact-form.cfm">Contact Us</a>
                            </li>
                            <div id="newsletter-menu" class="col-md-3 subscribe">
                                <p>Enewsletter Signup
                                </p>
                                <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">
                                    </div>
                                    <input name="search" value="Go" style="float: right" type="submit">
                    </form>
                </div>
                        </ul>
                    </div>

Open in new window

0

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.
0
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
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.