Solved

Adjust the secondary navigation bar width in WordPress

Posted on 2015-01-17
13
298 Views
Last Modified: 2015-01-19
I've been asked by a friend to assist them in making changes to their Wordpress website. The URL is: http://www.tuesdayschildren.org/.

The "secondary" navigation currently displays 4 "mother" topics: ABOUT US, OUR PROGRAMS, OUR STORIES, GET INVOLVED.

I've been asked to bring a "child" element (WHO WE SERVE, under ABOUT US) up to become a "mother" element, and place that in between ABOUT US and OUR PROGRAMS.

When I adjust the menu, GET INVOLVED wraps.

When I review the CSS, is see that the width is 960 px. But just changing that to 1200 px doesn't make a difference.

Where do I adjust the width of the secondary navigation bar to support another mother element?

Thank you for your assistance.
0
Comment
Question by:joibrooks
  • 6
  • 5
  • 2
13 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40555779
This is the css definition that needs to be changed.

.subMenu ul#menu-secondary li, .subMenu ul#menu-secondary-menu li {
    border-right: 0 solid #0aa9f3;
    margin: auto;
    padding: 0 !important;
    position: relative;
    text-align: center;
    width: 182px;
    z-index: 9999;
}
0
 

Author Comment

by:joibrooks
ID: 40556302
Hello, Tom. I've implemented that change, but alone it doesn't provide enough width to insert a new highest level nav element without wrapping. There are other width attributes set to 230 within "subMenu" class. Do I need to change them all?

I don't have a development site for this to test with, my apologies. All the changes I make, go live. When I move the Who We Serve nav element in the menu system up in the hierarchy, if the secondary nav wraps, I revert back to what last worked. In this way, the live site doesn't look broken to browsers.

I'm using Chrome to view the site.

As you already figured out, the CSS page is here:
http://www.tuesdayschildren.org/wp-content/themes/tuesdaysChildren/style.css

What next? And, thanks again.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40556346
As you already figured out, the CSS page is here:
Not really. Your theme is automatically minifying your stylesheets and giving them long alphanumeric names. There are several on the page like this one. Style.css is not listed as an asset on the page.
http://www.tuesdayschildren.org/wp-content/cache/minify/000000/dYpBDoAgDAQ_BFbf4EsaqIpUjC2a9Pca4lEvm8nMDiAYLSP7CUswPyMzicFGq7bxmlNRN_z8giqsx_lg18LrXQ_1JI1oOi6Jo1ABrcb0FfaLRFKkGw.css

I can only react to what is presented at the live site. When I add the menu item in Firebug and change the width in one place only, the items do not wrap. How that translates into changes on your actual stylesheet, I have no clue. Perhaps your theme will allow you to turn off the feature that automatically minifies the stylesheets.
Fitting a new top level menu item
0
 

Author Comment

by:joibrooks
ID: 40556406
Darn, Tom.  My IP is cleared with the host, so I'm able to see all the information. The host is a small and local outfit, not mainstream.

Just to clafiry, my speciality is email marketing and I "dabble" in websites. My friend asked me to help, and seeing it as a non-profit with a cause near and dear to my heart, I offered to help.

I don't use Firebug, so I'm not familiar with it.

If I attach the CSS file, does that help at all? I haven't made any changes to this file. I'm using it as a backup, in case I need to revert to last known version.

Much appreciate your effort.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40556443
So you have access to the file structure and database on the host. Do you also have a Wordpress admin login to the site?
0
 

Author Comment

by:joibrooks
ID: 40556487
Yes, I do have admin login access, Tom.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40556573
Before changing anything I would like to point out that the current menu falls apart when the browser width drops below 980px. Maybe that's an issue for another day. We need to note that going in so we don't blame today's modifications for that issue.

Looks like the original author created a custom theme called Tuesday's Children from a template that is only known to them so, no help there. If it were a purchased theme we could go to the vendor for support on how to replace cached, minified stylesheets.

I have to assume that the theme generates minified versions of the five different stylesheets on-the-fly and stores them in this folder:
http://www.tuesdayschildren.org/wp-content/cache/minify/000000/

Your next attempt at fixing this issue looks like this:

1.) Add the menu item through the WP admin GUI. (That's how you've been doing it, right?)
2.) Replace the width:230px in style.css with width:180px. It occurs in three places by my count. Change all three.
3.) Use your file structure access with the host to rename the 000000 folder cited above to 000000_OLD. Better still, move it to another folder.
4.) Upload the modified styles.css.

The hope is that renaming the 000000 folder will cause the theme to automatically regenerate the minified stylesheets using the modified styles.css and your changes will have an impact.

If it does not work, just restore the old 000000 folder.

Once we establish a working method for making modifications we can tweak at will.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40557031
If it were a purchased theme we could go to the vendor for support on how to replace cached, minified stylesheets.

The WordPress admin user makes the changes to style.css like normal and rebuilds the cache according to the plugin's instructions (either W3 Total Cache or WP Super Cache).  There's no need to go through the gymnastics of renaming cache folders.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40557505
Well, duh. If you KNOW there's a plugin involved then of course you follow the plugin instructions. W3 Total Cache and WP Super Cache have not yet been part of my WP experience. I have encountered themes that automatically minify stylesheets however. Thanks for sharing your experience Jason. It should make finding the solution much easier.
0
 

Author Comment

by:joibrooks
ID: 40557543
Good morning, Tom, Jason. I had a conversation with my client/friend after reviewing Tom's post, where he said:

Before changing anything I would like to point out that the current menu falls apart when the browser width drops below 980px. Maybe that's an issue for another day. We need to note that going in so we don't blame today's modifications for that issue.

I hesitate adjusting code that may already be hacked (to death). I've been in that situation one time already, and have learned that mismanaging WordPress has the potential of becoming a Dr. Frankenstein and monster scenario.

After the conversation with the client, the changes we made to the pages didn't require me to adjust the menu system, and therefore touch the CSS. Because I've been asked to make changes to other sections over the long term, my recommendation to the client is that they hire themselves a reputable WordPress web dev & design firm to manage their growing pains.

I greatly appreciate your effort. If you have further recommendations, please feel free to comment.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40558085
If you KNOW there's a plugin involved then of course you follow the plugin instructions.

View source is our friend:

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk: enhanced

 Served from: www.tuesdayschildren.org @ 2015-01-19 16:51:35 by W3 Total Cache -->

Open in new window


W3 Total Cache and WP Super Cache have not yet been part of my WP experience. I have encountered themes that automatically minify stylesheets however.

Wow.  Your experience is the exact opposite of mine.  I tend to find that theme developers do the bare minimum to get by and leave things like caching and minification in the hands of the users.

If you have further recommendations, please feel free to comment.

If they have the budget to upgrade, then getting a new theme/fixing this theme is probably worth the spend.  It doesn't validate:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.tuesdayschildren.org%2F

and the responsive aspect needs help as Tom noted above.  The design in general could also use some tweaking as it looks pretty bleak and empty below the hero image.
0
 

Author Comment

by:joibrooks
ID: 40558822
Jason, regarding the budget, that was exactly the conversation I had with the non-profit.

As I mentioned to Tom before, WP I dabble in, email marketing is my bread and butter. I can read code and am comfortable with CSS, but I wasn't involved in the development of this particular site, so I don't know all the details. It is really to the non-profit's benefit to hire someone who does more than dabble and make educated guesses.

Thanks for the input.
0
 

Author Closing Comment

by:joibrooks
ID: 40558827
Tom, thank you for your patience. I didn't intend to bail out, but after reviewing your comment and agreeing that other issues could impact future solutions, I made simplier changes to the site that did not include widening the nav bar.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

706 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now