Solved

Finding where to change a sub-menu style with css.

Posted on 2015-01-06
53
197 Views
Last Modified: 2015-01-09
I have a site here:

http://rentawebguy.net/nofryzone/

and if you hover over the SUNLESS? menu option a sub-menu drops down. However I want to changed the sub-menu so it aligns to the left, has a bigger font and a black border around the menu list.

I've look thru the css and I cannot find where to do this. I also looked at the header. No luck.

This is a child theme of the Wordpress Twenty Twelve theme.

Any help or suggestions is appreciated.
0
Comment
Question by:Donnie Walker
  • 26
  • 17
  • 9
  • +1
53 Comments
 
LVL 42

Assisted Solution

by:Rob Jurd, EE MVE
Rob Jurd, EE MVE earned 167 total points
ID: 40534887
li.menu-item > a {
    text-align: left;
    font-size: 14px; /* currently 12px */
   
}

ul.sub-menu {
    border: 1px solid black !important;
}
0
 
LVL 4

Assisted Solution

by:Tom Chadaravicius
Tom Chadaravicius earned 222 total points
ID: 40534890
How about float: left; "so it aligns to the left";
border: 1px solid #000000; to add black border;
font-size:12px; to define font (although I use em whenever I can to stay proportional rather than specifying hard pixels).
I see it uses one css (style.css); you can expand your style by adding your own css underneath style.css.
0
 

Author Comment

by:Donnie Walker
ID: 40534919
Rob, I tried your css and it is working except for the font size. I boosted up to 30px and then 50px and the font size never changed.

It was also transparent so I added a white background.

Also when you hover over the sub menu link the background is gray.

Any suggestions?
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40534921
line-height: 16px; (or your chosen height)
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40534932
I see that the active definition of your font size is on line 1561 in style.css (.main-navigation li ul li a { .
It uses rem. rem is Wordpress own way to calculate relative size.
Please try "<ul class=... style={font-size: 14px;}
The aim is to override Wordpress interpretation of rem (which gets generated in php code).
0
 

Author Comment

by:Donnie Walker
ID: 40534933
Tom, I tried that and it didn't change the sub-menu font.

I tried it on the UL first because that is where I thought it would be then I tried it on the item and it just moved the main menu up a little bit.

Didn't change the sub menu at all.
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40534936
I'm sorry Donnie, it looks like I have posted the below suggestion after you posted your response.
I see that the active definition of your font size is on line 1561 in style.css (.main-navigation li ul li a { .
It uses rem. rem is Wordpress own way to calculate relative size.
Please try "<ul class=... style={font-size: 14px;}
The aim is to override Wordpress interpretation of rem (which gets generated in php code).
0
 

Author Comment

by:Donnie Walker
ID: 40534937
Tom, I didn't understand where I was to put that style.

This is my css from Rob:

li.menu-item > a {
    text-align: left;
    font-size: 20px;
    line-height: 30px;
}

ul.sub-menu {
    border: 1px solid black !important;
    background-color: #fff;
    font-size: 14px;
}


I tried the font-size in both places with no luck.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40534939
For the font size, use the !important flag to overwrite the Wordpress styles:

modify li.menu-item > a to the following as you need to make sure you're pointing to the sub menu or the whole menu changes!
.sub-menu li.menu-item > a {
...
    font-size: 8px !important;
....
}

Also when you hover over the sub menu link the background is gray.
What would you like it to be?
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40534941
Ideally, put your (Rob's) style below the other styles. The latest definition is the final definition (that's why "cascading" is in the name).
If your Wordpress settings allow so, have your own .css file rendered after the style.css is rendered.
As the last measure, define your style in the code

<style>
ul.sub-menu {
    border: 1px solid black !important;
    background-color: #fff;
    font-size: 14px;
}
</style>

*I just humbly suggest to use "#000000" instead of "black" (that in itself is not causing the problem you describe).
**Avoid using rem to be caught in Wordpress code that reinterprets CSS elements.
Thank you,
Tom
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40534945
I agree with using the hex code if only to make it clear what you want to do (and save the issue if a typo or browser conflict)

How are you including these styles because if they need to be site wide you may want to look at a plugin. I've used "custom css" as an example.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40534946
Tom, what do you mean by rem? Could just be my brain atm...
0
 

Author Comment

by:Donnie Walker
ID: 40534948
well, the hover color can be anything. Maybe #eeb60d?

It seems like the box has a large white background when you hover. Is there a way to make it auto width depending how wide the link is?

You guys are great. True experts.
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40534949
Thank you Rob. To clarify, hexadecimal color code (#000000) is less likely to cause cross-browser problems than named colors ("black"), the latter originally brought in by Microsoft (and thence, the Internet Explorer) about a decade ago.
Again, the color code is not the cause of the glitch with font-size and/or line-height.
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40534951
Rob - rem is Wordpress' own unit of measure. Wordpress "answers" HTTP request to render .CSS file by passing the request to PHP code to generate the final CSS output.
In a hurry, I have found this ref: Understanding Property Size in Wordpress
I can locate the actual php code that does that, I would need some 30 minutes to find a suitable WP installation among my projects.
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40534959
Here's style.css from Wordpress 2012. Their attempts to explain "rem" are at the top.

This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

.htaccess sends "css" request to a .php file to process css.
/*
Theme Name: Twenty Twelve
Theme URI: http://wordpress.org/extend/themes/twentytwelve
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: twentytwelve

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.142857143rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.714285714rem 0; ( 24 / $rembase )
}

---------- Further reading

http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/


/* =Reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
ol,
ul {
	list-style: none;
}
blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption,
th,
td {
	font-weight: normal;
	text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}
html {
	overflow-y: scroll;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
a:focus {
	outline: thin dotted;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}
audio,
canvas,
video {
	display: inline-block;
}
audio:not([controls]) {
	display: none;
}
del {
	color: #333;
}
ins {
	background: #fff9c0;
	text-decoration: none;
}
hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin: 24px;
	margin-bottom: 1.714285714rem;
}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
small {
	font-size: smaller;
}
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
}

/* Clearing floats */
.clear:after,
.wrapper:after,
.format-status .entry-header:after {
	clear: both;
}
.clear:before,
.clear:after,
.wrapper:before,
.wrapper:after,
.format-status .entry-header:before,
.format-status .entry-header:after {
	display: table;
	content: "";
}


/* =Repeatable patterns
-------------------------------------------------------------- */

/* Small headers */
.archive-title,
.page-title,
.widget-title,
.entry-content th,
.comment-content th {
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 2.181818182;
	font-weight: bold;
	text-transform: uppercase;
	color: #636363;
}

/* Shared Post Format styling */
article.format-quote footer.entry-meta,
article.format-link footer.entry-meta,
article.format-status footer.entry-meta {
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 2.181818182;
}

/* Form fields, general styles first */
button,
input,
textarea {
	border: 1px solid #ccc;
	border-radius: 3px;
	font-family: inherit;
	padding: 6px;
	padding: 0.428571429rem;
}
button,
input {
    line-height: normal;
}
textarea {
	font-size: 100%;
	overflow: auto;
	vertical-align: top;
}

/* Reset non-text input types */
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* Buttons */
.menu-toggle,
input[type="submit"],
input[type="button"],
input[type="reset"],
article.post-password-required input[type=submit],
li.bypostauthor cite span {
	padding: 6px 10px;
	padding: 0.428571429rem 0.714285714rem;
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 1.428571429;
	font-weight: normal;
	color: #7c7c7c;
	background-color: #e6e6e6;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
	border: 1px solid #d2d2d2;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}
.menu-toggle,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	cursor: pointer;
}
button[disabled],
input[disabled] {
    cursor: default;
}
.menu-toggle:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
article.post-password-required input[type=submit]:hover {
	color: #5e5e5e;
	background-color: #ebebeb;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: linear-gradient(top, #f9f9f9, #ebebeb);
}
.menu-toggle:active,
.menu-toggle.toggled-on,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	color: #757575;
	background-color: #e1e1e1;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: linear-gradient(top, #ebebeb, #e1e1e1);
	box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
	border: none;
}
li.bypostauthor cite span {
	color: #fff;
	background-color: #21759b;
	background-image: none;
	border: 1px solid #1f6f93;
	border-radius: 2px;
	box-shadow: none;
	padding: 0;
}

/* Responsive images */
.entry-content img,
.comment-content img,
.widget img {
	max-width: 100%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
	max-width: 100%;
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

/* Make sure videos and embeds fit their containers */
embed,
iframe,
object,
video {
	max-width: 100%;
}
.entry-content .twitter-tweet-rendered {
	max-width: 100% !important; /* Override the Twitter embed fixed width */
}

/* Images */
.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
	/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
	border-radius: 3px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.wp-caption {
	max-width: 100%; /* Keep wide captions from overflowing their container. */
	padding: 4px;
}
.wp-caption .wp-caption-text,
.gallery-caption,
.entry-caption {
	font-style: italic;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	color: #757575;
}
img.wp-smiley,
.rsswidget img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}
.entry-content dl.gallery-item {
	margin: 0;
}
.gallery-item a,
.gallery-caption {
	width: 90%;
}
.gallery-item a {
	display: block;
}
.gallery-caption a {
	display: inline;
}
.gallery-columns-1 .gallery-item a {
	max-width: 100%;
	width: auto;
}
.gallery .gallery-icon img {
	height: auto;
	max-width: 90%;
	padding: 5%;
}
.gallery-columns-1 .gallery-icon img {
	padding: 3%;
}

/* Navigation */
.site-content nav {
	clear: both;
	line-height: 2;
	overflow: hidden;
}
#nav-above {
	padding: 24px 0;
	padding: 1.714285714rem 0;
}
#nav-above {
	display: none;
}
.paged #nav-above {
	display: block;
}
.nav-previous,
.previous-image {
	float: left;
	width: 50%;
}
.nav-next,
.next-image {
	float: right;
	text-align: right;
	width: 50%;
}
.nav-single + .comments-area,
#comment-nav-above {
	margin: 48px 0;
	margin: 3.428571429rem 0;
}

/* Author profiles */
.author .archive-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.author-info {
	border-top: 1px solid #ededed;
	margin: 24px 0;
	margin: 1.714285714rem 0;
	padding-top: 24px;
	padding-top: 1.714285714rem;
	overflow: hidden;
}
.author-description p {
	color: #757575;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}
.author.archive .author-info {
	border-top: 0;
	margin: 0 0 48px;
	margin: 0 0 3.428571429rem;
}
.author.archive .author-avatar {
	margin-top: 0;
}


/* =Basic structure
-------------------------------------------------------------- */

/* Body, links, basics */
html {
	font-size: 87.5%;
}
body {
	font-size: 14px;
	font-size: 1rem;
	font-family: Helvetica, Arial, sans-serif;
	text-rendering: optimizeLegibility;
	color: #444;
}
body.custom-font-enabled {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
a {
	outline: none;
	color: #21759b;
}
a:hover {
	color: #0f3647;
}

/* Assistive text */
.assistive-text,
.site .screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
}
.main-navigation .assistive-text:hover,
.main-navigation .assistive-text:active,
.main-navigation .assistive-text:focus {
	background: #fff;
	border: 2px solid #333;
	border-radius: 3px;
	clip: auto !important;
	color: #000;
	display: block;
	font-size: 12px;
	padding: 12px;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 100000; /* Above WP toolbar */
}

/* Page structure */
.site {
	padding: 0 24px;
	padding: 0 1.714285714rem;
	background-color: #fff;
}
.site-content {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
}
.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
}

/* Header */
.site-header {
	padding: 24px 0;
	padding: 1.714285714rem 0;
}
.site-header h1,
.site-header h2 {
	text-align: center;
}
.site-header h1 a,
.site-header h2 a {
	color: #515151;
	display: inline-block;
	text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {
	color: #21759b;
}
.site-header h1 {
	font-size: 24px;
	font-size: 1.714285714rem;
	line-height: 1.285714286;
	margin-bottom: 14px;
	margin-bottom: 1rem;
}
.site-header h2 {
	font-weight: normal;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
}
.header-image {
	margin-top: 24px;
	margin-top: 1.714285714rem;
}

/* Navigation Menu */
.main-navigation {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	text-align: center;
}
.main-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143;
}
.main-navigation a {
	color: #5e5e5e;
}
.main-navigation a:hover {
	color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
	display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
	display: inline-block;
}

/* Banner */
section[role="banner"] {
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
}

/* Sidebar */
.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
}
.widget-area .widget h3 {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}
.widget-area .widget p {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.widget-area .textwidget ul {
	list-style: disc outside;
	margin: 0 0 24px;
	margin: 0 0 1.714285714rem;
}
.widget-area .textwidget li {
	margin-left: 36px;
	margin-left: 2.571428571rem;
}
.widget-area .widget a {
	color: #757575;
}
.widget-area .widget a:hover {
	color: #21759b;
}
.widget-area #s {
	width: 53.66666666666%; /* define a width to avoid dropping a wider submit button */
}

/* Footer */
footer[role="contentinfo"] {
	border-top: 1px solid #ededed;
	clear: both;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	max-width: 960px;
	max-width: 68.571428571rem;
	margin-top: 24px;
	margin-top: 1.714285714rem;
	margin-left: auto;
	margin-right: auto;
	padding: 24px 0;
	padding: 1.714285714rem 0;
}
footer[role="contentinfo"] a {
	color: #686868;
}
footer[role="contentinfo"] a:hover {
	color: #21759b;
}


/* =Main content and comment content
-------------------------------------------------------------- */

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header img.wp-post-image {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-header .entry-title {
	font-size: 20px;
	font-size: 1.428571429rem;
	line-height: 1.2;
	font-weight: normal;
}
.entry-header .entry-title a {
	text-decoration: none;
}
.entry-header .entry-format {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-weight: normal;
}
.entry-header .comments-link {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
}
.comments-link a,
.entry-meta a {
	color: #757575;
}
.comments-link a:hover,
.entry-meta a:hover {
	color: #21759b;
}
article.sticky .featured-post {
	border-top: 4px double #ededed;
	border-bottom: 4px double #ededed;
	color: #757575;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 3.692307692;
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
	text-align: center;
}
.entry-content,
.entry-summary,
.mu_register {
	line-height: 1.714285714;
}
.entry-content h1,
.comment-content h1,
.entry-content h2,
.comment-content h2,
.entry-content h3,
.comment-content h3,
.entry-content h4,
.comment-content h4,
.entry-content h5,
.comment-content h5,
.entry-content h6,
.comment-content h6 {
	margin: 24px 0;
	margin: 1.714285714rem 0;
	line-height: 1.714285714;
}
.entry-content h1,
.comment-content h1 {
	font-size: 21px;
	font-size: 1.5rem;
	line-height: 1.5;
}
.entry-content h2,
.comment-content h2,
.mu_register h2 {
	font-size: 18px;
	font-size: 1.285714286rem;
	line-height: 1.6;
}
.entry-content h3,
.comment-content h3 {
	font-size: 16px;
	font-size: 1.142857143rem;
	line-height: 1.846153846;
}
.entry-content h4,
.comment-content h4 {
	font-size: 14px;
	font-size: 1rem;
	line-height: 1.846153846;
}
.entry-content h5,
.comment-content h5 {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}
.entry-content h6,
.comment-content h6 {
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.846153846;
}
.entry-content p,
.entry-summary p,
.comment-content p,
.mu_register p {
	margin: 0 0 24px;
	margin: 0 0 1.714285714rem;
	line-height: 1.714285714;
}
.entry-content ol,
.comment-content ol,
.entry-content ul,
.comment-content ul,
.mu_register ul {
	margin: 0 0 24px;
	margin: 0 0 1.714285714rem;
	line-height: 1.714285714;
}
.entry-content ul ul,
.comment-content ul ul,
.entry-content ol ol,
.comment-content ol ol,
.entry-content ul ol,
.comment-content ul ol,
.entry-content ol ul,
.comment-content ol ul {
	margin-bottom: 0;
}
.entry-content ul,
.comment-content ul,
.mu_register ul {
	list-style: disc outside;
}
.entry-content ol,
.comment-content ol {
	list-style: decimal outside;
}
.entry-content li,
.comment-content li,
.mu_register li {
	margin: 0 0 0 36px;
	margin: 0 0 0 2.571428571rem;
}
.entry-content blockquote,
.comment-content blockquote {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
	padding: 24px;
	padding: 1.714285714rem;
	font-style: italic;
}
.entry-content blockquote p:last-child,
.comment-content blockquote p:last-child {
	margin-bottom: 0;
}
.entry-content code,
.comment-content code {
	font-family: Consolas, Monaco, Lucida Console, monospace;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
}
.entry-content pre,
.comment-content pre {
	border: 1px solid #ededed;
	color: #666;
	font-family: Consolas, Monaco, Lucida Console, monospace;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.714285714;
	margin: 24px 0;
	margin: 1.714285714rem 0;
	overflow: auto;
	padding: 24px;
	padding: 1.714285714rem;
}
.entry-content pre code,
.comment-content pre code {
	display: block;
}
.entry-content abbr,
.comment-content abbr,
.entry-content dfn,
.comment-content dfn,
.entry-content acronym,
.comment-content acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}
.entry-content address,
.comment-content address {
	display: block;
	line-height: 1.714285714;
	margin: 0 0 24px;
	margin: 0 0 1.714285714rem;
}
img.alignleft {
	margin: 12px 24px 12px 0;
	margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;
}
img.alignright {
	margin: 12px 0 12px 24px;
	margin: 0.857142857rem 0 0.857142857rem 1.714285714rem;
}
img.aligncenter {
	margin-top: 12px;
	margin-top: 0.857142857rem;
	margin-bottom: 12px;
	margin-bottom: 0.857142857rem;
}
.entry-content embed,
.entry-content iframe,
.entry-content object,
.entry-content video {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-content dl,
.comment-content dl {
	margin: 0 24px;
	margin: 0 1.714285714rem;
}
.entry-content dt,
.comment-content dt {
	font-weight: bold;
	line-height: 1.714285714;
}
.entry-content dd,
.comment-content dd {
	line-height: 1.714285714;
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.entry-content table,
.comment-content table {
	border-bottom: 1px solid #ededed;
	color: #757575;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	margin: 0 0 24px;
	margin: 0 0 1.714285714rem;
	width: 100%;
}
.entry-content table caption,
.comment-content table caption {
	font-size: 16px;
	font-size: 1.142857143rem;
	margin: 24px 0;
	margin: 1.714285714rem 0;
}
.entry-content td,
.comment-content td {
	border-top: 1px solid #ededed;
	padding: 6px 10px 6px 0;
}
.site-content article {
	border-bottom: 4px double #ededed;
	margin-bottom: 72px;
	margin-bottom: 5.142857143rem;
	padding-bottom: 24px;
	padding-bottom: 1.714285714rem;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}
.page-links {
	clear: both;
	line-height: 1.714285714;
}
footer.entry-meta {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #757575;
}
.single-author .entry-meta .by-author {
	display: none;
}
.mu_register h2 {
	color: #757575;
	font-weight: normal;
}


/* =Archives
-------------------------------------------------------------- */

.archive-header,
.page-header {
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	padding-bottom: 22px;
	padding-bottom: 1.571428571rem;
	border-bottom: 1px solid #ededed;
}
.archive-meta {
	color: #757575;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	margin-top: 22px;
	margin-top: 1.571428571rem;
}


/* =Single image attachment view
-------------------------------------------------------------- */

.article.attachment {
	overflow: hidden;
}
.image-attachment div.attachment {
	text-align: center;
}
.image-attachment div.attachment p {
	text-align: center;
}
.image-attachment div.attachment img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}
.image-attachment .entry-caption {
	margin-top: 8px;
	margin-top: 0.571428571rem;
}


/* =Aside post format
-------------------------------------------------------------- */

article.format-aside h1 {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
article.format-aside h1 a {
	text-decoration: none;
	color: #4d525a;
}
article.format-aside h1 a:hover {
	color: #2e3542;
}
article.format-aside .aside {
	padding: 24px 24px 0;
	padding: 1.714285714rem;
	background: #d2e0f9;
	border-left: 22px solid #a8bfe8;
}
article.format-aside p {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #4a5466;
}
article.format-aside blockquote:last-child,
article.format-aside p:last-child {
	margin-bottom: 0;
}


/* =Post formats
-------------------------------------------------------------- */

/* Image posts */
article.format-image footer h1 {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	font-weight: normal;
}
article.format-image footer h2 {
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 2.181818182;
}
article.format-image footer a h2 {
	font-weight: normal;
}

/* Link posts */
article.format-link header {
	padding: 0 10px;
	padding: 0 0.714285714rem;
	float: right;
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 2.181818182;
	font-weight: bold;
	font-style: italic;
	text-transform: uppercase;
	color: #848484;
	background-color: #ebebeb;
	border-radius: 3px;
}
article.format-link .entry-content {
	max-width: 80%;
	float: left;
}
article.format-link .entry-content a {
	font-size: 22px;
	font-size: 1.571428571rem;
	line-height: 1.090909091;
	text-decoration: none;
}

/* Quote posts */
article.format-quote .entry-content p {
	margin: 0;
	padding-bottom: 24px;
	padding-bottom: 1.714285714rem;
}
article.format-quote .entry-content blockquote {
	display: block;
	padding: 24px 24px 0;
	padding: 1.714285714rem 1.714285714rem 0;
	font-size: 15px;
	font-size: 1.071428571rem;
	line-height: 1.6;
	font-style: normal;
	color: #6a6a6a;
	background: #efefef;
}

/* Status posts */
.format-status .entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.format-status .entry-header header {
	display: inline-block;
}
.format-status .entry-header h1 {
	font-size: 15px;
	font-size: 1.071428571rem;
	font-weight: normal;
	line-height: 1.6;
	margin: 0;
}
.format-status .entry-header h2 {
	font-size: 12px;
	font-size: 0.857142857rem;
	font-weight: normal;
	line-height: 2;
	margin: 0;
}
.format-status .entry-header header a {
	color: #757575;
}
.format-status .entry-header header a:hover {
	color: #21759b;
}
.format-status .entry-header img {
	float: left;
	margin-right: 21px;
	margin-right: 1.5rem;
}


/* =Comments
-------------------------------------------------------------- */

.comments-title {
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	font-size: 16px;
	font-size: 1.142857143rem;
	line-height: 1.5;
	font-weight: normal;
}
.comments-area article {
	margin: 24px 0;
	margin: 1.714285714rem 0;
}
.comments-area article header {
	margin: 0 0 48px;
	margin: 0 0 3.428571429rem;
	overflow: hidden;
	position: relative;
}
.comments-area article header img {
	float: left;
	padding: 0;
	line-height: 0;
}
.comments-area article header cite,
.comments-area article header time {
	display: block;
	margin-left: 85px;
	margin-left: 6.071428571rem;
}
.comments-area article header cite {
	font-style: normal;
	font-size: 15px;
	font-size: 1.071428571rem;
	line-height: 1.42857143;
}
.comments-area article header time {
	line-height: 1.714285714;
	text-decoration: none;
	font-size: 12px;
	font-size: 0.857142857rem;
	color: #5e5e5e;
}
.comments-area article header a {
	text-decoration: none;
	color: #5e5e5e;
}
.comments-area article header a:hover {
	color: #21759b;
}
.comments-area article header cite a {
	color: #444;
}
.comments-area article header cite a:hover {
	text-decoration: underline;
}
.comments-area article header h4 {
	position: absolute;
	top: 0;
	right: 0;
	padding: 6px 12px;
	padding: 0.428571429rem 0.857142857rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	font-weight: normal;
	color: #fff;
	background-color: #0088d0;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #009cee, #0088d0);
	background-image: -ms-linear-gradient(top, #009cee, #0088d0);
	background-image: -webkit-linear-gradient(top, #009cee, #0088d0);
	background-image: -o-linear-gradient(top, #009cee, #0088d0);
	background-image: linear-gradient(top, #009cee, #0088d0);
	border-radius: 3px;
	border: 1px solid #007cbd;
}
.comments-area li.bypostauthor cite span {
	position: absolute;
	margin-left: 5px;
	margin-left: 0.357142857rem;
	padding: 2px 5px;
	padding: 0.142857143rem 0.357142857rem;
	font-size: 10px;
	font-size: 0.714285714rem;
}
a.comment-reply-link,
a.comment-edit-link {
	color: #686868;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}
a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #21759b;
}
.commentlist .pingback {
	line-height: 1.714285714;
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

/* Comment form */
#respond {
	margin-top: 48px;
	margin-top: 3.428571429rem;
}
#respond h3#reply-title {
	font-size: 16px;
	font-size: 1.142857143rem;
	line-height: 1.5;
}
#respond h3#reply-title #cancel-comment-reply-link {
	margin-left: 10px;
	margin-left: 0.714285714rem;
	font-weight: normal;
	font-size: 12px;
	font-size: 0.857142857rem;
}
#respond form {
	margin: 24px 0;
	margin: 1.714285714rem 0;
}
#respond form p {
	margin: 11px 0;
	margin: 0.785714286rem 0;
}
#respond form p.logged-in-as {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
#respond form label {
	display: block;
	line-height: 1.714285714;
}
#respond form input[type="text"],
#respond form textarea {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.714285714;
	padding: 10px;
	padding: 0.714285714rem;
	width: 100%;
}
#respond form p.form-allowed-tags {
	margin: 0;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	color: #5e5e5e;
}
.required {
	color: red;
}


/* =Front page template
-------------------------------------------------------------- */

.entry-page-image {
	margin-bottom: 14px;
	margin-bottom: 1rem;
}
.template-front-page .site-content article {
	border: 0;
	margin-bottom: 0;
}
.template-front-page .widget-area {
	clear: both;
	float: none;
	width: auto;
	padding-top: 24px;
	padding-top: 1.714285714rem;
	border-top: 1px solid #ededed;
}
.template-front-page .widget-area .widget li {
	margin: 8px 0 0;
	margin: 0.571428571rem 0 0;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.714285714;
	list-style-type: square;
	list-style-position: inside;
}
.template-front-page .widget-area .widget li a {
	color: #757575;
}
.template-front-page .widget-area .widget li a:hover {
	color: #21759b;
}
.template-front-page .widget-area .widget_text img {
	float: left;
	margin: 8px 24px 8px 0;
	margin: 0.571428571rem 1.714285714rem 0.571428571rem 0;
}


/* =Widgets
-------------------------------------------------------------- */

.widget-area .widget ul ul {
	margin-left: 12px;
	margin-left: 0.857142857rem;
}
.widget_rss li {
	margin: 12px 0;
	margin: 0.857142857rem 0;
}
.widget_recent_entries .post-date,
.widget_rss .rss-date {
	color: #aaa;
	font-size: 11px;
	font-size: 0.785714286rem;
	margin-left: 12px;
	margin-left: 0.857142857rem;
}
#wp-calendar {
	margin: 0;
	width: 100%;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #686868;
}
#wp-calendar th,
#wp-calendar td,
#wp-calendar caption {
	text-align: left;
}
#wp-calendar #next {
	padding-right: 24px;
	padding-right: 1.714285714rem;
	text-align: right;
}
.widget_search label {
	display: block;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}
.widget_twitter li {
	list-style-type: none;
}
.widget_twitter .timesince {
	display: block;
	text-align: right;
}


/* =Plugins
----------------------------------------------- */

img#wpstats {
	display: block;
	margin: 0 auto 24px;
	margin: 0 auto 1.714285714rem;
}


/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.author-avatar {
		float: left;
		margin-top: 8px;
		margin-top: 0.571428571rem;
	}
	.author-description {
		float: right;
		width: 80%;
	}
	.site {
		margin: 0 auto;
		max-width: 960px;
		max-width: 68.571428571rem;
		overflow: hidden;
	}
	.site-content {
		float: left;
		width: 65.104166667%;
	}
	body.template-front-page .site-content,
	body.single-attachment .site-content,
	body.full-width .site-content {
		width: 100%;
	}
	.widget-area {
		float: right;
		width: 26.041666667%;
	}
	.site-header h1,
	.site-header h2 {
		text-align: left;
	}
	.site-header h1 {
		font-size: 26px;
		font-size: 1.857142857rem;
		line-height: 1.846153846;
		margin-bottom: 0;
	}
	.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.main-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.main-navigation li a:hover {
		color: #000;
	}
	.main-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857rem 0 0;
		position: relative;
	}
	.main-navigation li ul {
		display: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
	}
	.main-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.main-navigation ul li:hover > ul {
		border-left: 0;
		display: block;
	}
	.main-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 0.785714286rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.main-navigation li ul li a:hover {
		background: #e3e3e3;
		color: #444;
	}
	.main-navigation .current-menu-item > a,
	.main-navigation .current-menu-ancestor > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_ancestor > a {
		color: #636363;
		font-weight: bold;
	}
	.menu-toggle {
		display: none;
	}
	.entry-header .entry-title {
		font-size: 22px;
		font-size: 1.571428571rem;
	}
	#respond form input[type="text"] {
		width: 46.333333333%;
	}
	#respond form textarea.blog-textarea {
		width: 79.666666667%;
	}
	.template-front-page .site-content,
	.template-front-page article {
		overflow: hidden;
	}
	.template-front-page.has-post-thumbnail article {
		float: left;
		width: 47.916666667%;
	}
	.entry-page-image {
		float: right;
		margin-bottom: 0;
		width: 47.916666667%;
	}
	.template-front-page .widget-area .widget,
	.template-front-page.two-sidebars .widget-area .front-widgets {
		float: left;
		width: 51.875%;
		margin-bottom: 24px;
		margin-bottom: 1.714285714rem;
	}
	.template-front-page .widget-area .widget:nth-child(odd) {
		clear: right;
	}
	.template-front-page .widget-area .widget:nth-child(even),
	.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
		float: right;
		width: 39.0625%;
		margin: 0 0 24px;
		margin: 0 0 1.714285714rem;
	}
	.template-front-page.two-sidebars .widget,
	.template-front-page.two-sidebars .widget:nth-child(even) {
		float: none;
		width: auto;
	}
	.commentlist .children {
		margin-left: 48px;
		margin-left: 3.428571429rem;
	}
}

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
	body {
		background-color: #e6e6e6;
	}
	body .site {
		padding: 0 40px;
		padding: 0 2.857142857rem;
		margin-top: 48px;
		margin-top: 3.428571429rem;
		margin-bottom: 48px;
		margin-bottom: 3.428571429rem;
		box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
	}
	body.custom-background-empty {
		background-color: #fff;
	}
	body.custom-background-empty .site,
	body.custom-background-white .site {
		padding: 0;
		margin-top: 0;
		margin-bottom: 0;
		box-shadow: none;
	}
}


/* =Print
----------------------------------------------- */

@media print {
	body {
		background: none !important;
		color: #000;
		font-size: 10pt;
	}
	footer a[rel=bookmark]:link:after,
	footer a[rel=bookmark]:visited:after {
		content: " [" attr(href) "] "; /* Show URLs */
	}
	a {
		text-decoration: none;
	}
	.entry-content img,
	.comment-content img,
	.author-avatar img,
	img.wp-post-image {
		border-radius: 0;
		box-shadow: none;
	}
	.site {
		clear: both !important;
		display: block !important;
		float: none !important;
		max-width: 100%;
		position: relative !important;
	}
	.site-header {
		margin-bottom: 72px;
		margin-bottom: 5.142857143rem;
		text-align: left;
	}
	.site-header h1 {
		font-size: 21pt;
		line-height: 1;
		text-align: left;
	}
	.site-header h2 {
		color: #000;
		font-size: 10pt;
		text-align: left;
	}
	.site-header h1 a,
	.site-header h2 a {
		color: #000;
	}
	.author-avatar,
	#colophon,
	#respond,
	.commentlist .comment-edit-link,
	.commentlist .reply,
	.entry-header .comments-link,
	.entry-meta .edit-link a,
	.page-link,
	.site-content nav,
	.widget-area,
	img.header-image,
	.main-navigation {
		display: none;
	}
	.wrapper {
		border-top: none;
		box-shadow: none;
	}
	.site-content {
		margin: 0;
		width: auto;
	}
	.singular .entry-header .entry-meta {
		position: static;
	}
	.singular .site-content,
	.singular .entry-header,
	.singular .entry-content,
	.singular footer.entry-meta,
	.singular .comments-title {
		margin: 0;
		width: 100%;
	}
	.entry-header .entry-title,
	.entry-title,
	.singular .entry-title {
		font-size: 21pt;
	}
	footer.entry-meta,
	footer.entry-meta a {
		color: #444;
		font-size: 10pt;
	}
	.author-description {
		float: none;
		width: auto;
	}

	/* Comments */
	.commentlist > li.comment {
		background: none;
		position: relative;
		width: auto;
	}
	.commentlist .avatar {
		height: 39px;
		left: 2.2em;
		top: 2.2em;
		width: 39px;
	}
	.comments-area article header cite,
	.comments-area article header time {
		margin-left: 50px;
		margin-left: 3.57142857rem;
	}
}

Open in new window

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40534966
Thanks Tom. Never had to use the rem UOM! Learn something everyday eh?
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40534972
Though I haven't often used the 2012 theme but mostly bootstrap and essentially coded from scratch... might be the hard way *laughing*
0
 

Author Comment

by:Donnie Walker
ID: 40534987
so...how would I make the hover background gray so it goes across the whole box background?
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40534988

It seems like the box has a large white background when you hover. Is there a way to make it auto width depending how wide the link is?
The ul class="sub-menu" is wider than li.
I have changed

.main-navigation li {
(...)
margin: 0 0 0 0;

to fill the entire width allocated by the parent element.
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40534997
Rob, would you be adverse if Donnie kindly accepts my solution and yours - as an assisted answer  (smile)? I am very new answering on EE but pretty old in profession (since 1990s).
Thank you,
Tom
0
 

Author Comment

by:Donnie Walker
ID: 40535000
well that worked but it screwed up the main menu...all the links are scrunched together and move into the logo.

I put your css at the end of the stylesheet. Wait is the (...) for? I've never seen that before.
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40535010
The (...) is a placeholder for whatever style statements you have before margin: 0 0 0 0;. The (...) should not appear in the actual css.
I am looking at your page now, you might have changed the style.css (I don't see .main-navigation li { where it used to be. I was referencing the instance I saw there some 20 minutes ago.
Does it matter? If the "margin" is redefined underneath, it may override parent "margin" definitions.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40535017
Tom,
Choosing the solution is up to Donnie and what has worked for him.  We should focus on getting the answer first before discussing the points.  I understand you're new here but the knowledgebase should reflect the solution. If that's yours then great and I don't have an issue with it.

I'm also unable to see the menu now.
0
 

Author Comment

by:Donnie Walker
ID: 40535019
I couldn't find .main-navigation li {

So I did this:

.main-navigation li {
margin: 0 0 0 0;
}

.main-navigation li a {
   font-family: 'PT Sans', sans-serif; font-size: 1.2rem; color: #888888;
   
}
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40535020
I have found you have assigned ID attribute to <ul>. I have removed the ID attribute so it looks as follows:
<ul class="nav-menu">
The menu is positioned at the top again.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40535025
*The ID attribute will assign a style if there's a matching ID style in the CSS. Therefore, the ID can position the "ul id="menu-left-menu" (or any other HTML element) in the desired (or undesired) location.
0
 

Author Comment

by:Donnie Walker
ID: 40535026
What line on the stylesheet would show me that? I searched and didn't see any UL with a ID.
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40535030
The ID is assigned in the code (HTML, PHP that generates HTML), not in the CSS.
menu-left-menu has child features. When a parent uses that style, it gets positioning that ought belong to a child.
Thank you,
Tom
0
 
LVL 15

Assisted Solution

by:eemit
eemit earned 111 total points
ID: 40535036
Try:
ul.sub-menu {
    background-color: transparent;
    font-size: 15px;
}

.sub-menu li.menu-item > a {
    font-size: 15px;
    border: 1px solid #999;
}

.sub-menu li.menu-item:not(:last-child) > a {
    border-bottom: none;
}
0
 

Author Comment

by:Donnie Walker
ID: 40535046
eimit, that worked on the sub-menu thanks!

Tom, here is the header code:

      <header id="masthead" class="site-header" role="banner">

            <nav id="site-navigation" class="main-navigation" role="navigation">
                  <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
                  <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>


<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a>

                  <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<?php wp_nav_menu( array('container_class' => 'SECONDMENUCLASS', 'theme_location' => 'secondary' ) ); ?>
            </nav><!-- #site-navigation -->


      </header>


Is the ul code created automaticalyl?
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40535059
Looking at the PHP code snippet, I can say the menus are generated in child functions of

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<?php wp_nav_menu( array('container_class' => 'SECONDMENUCLASS', 'theme_location' => 'secondary' ) ); ?>

To be more precise - to tell where the ID gets assigned -- I would need to load that page (along with WP) into my IDE (which is perhaps not an option).
I have already noticed your "SECONDMENUCLASS" on the page. My guess (just a guess) is, the "SECONDMENUCLASS" has caused invocation of ID assignment.
As a safer try, how about "margin: 0 0 0 0 !important;"? (Rob says !important prevents Wordpress from mangling the CSS).
That element looked like  "margin: 0 [some value] 0 0;" "[some value]" used to hold the right unit and make submenu appear narrower than its parent - something you wanted to get rid off.
The margin units go as follows: top right bottom left.
Thank you,
Tom
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40535064
Here's the PHP file that contains the wp_nav_menu code and is responsible for generating HTML of the menu:
<?php
/**
 * Navigation Menu template functions
 *
 * @package WordPress
 * @subpackage Nav_Menus
 * @since 3.0.0
 */

/**
 * Create HTML list of nav menu items.
 *
 * @package WordPress
 * @since 3.0.0
 * @uses Walker
 */
class Walker_Nav_Menu extends Walker {
	/**
	 * @see Walker::$tree_type
	 * @since 3.0.0
	 * @var string
	 */
	var $tree_type = array( 'post_type', 'taxonomy', 'custom' );

	/**
	 * @see Walker::$db_fields
	 * @since 3.0.0
	 * @todo Decouple this.
	 * @var array
	 */
	var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

	/**
	 * @see Walker::start_lvl()
	 * @since 3.0.0
	 *
	 * @param string $output Passed by reference. Used to append additional content.
	 * @param int $depth Depth of page. Used for padding.
	 */
	function start_lvl( &$output, $depth = 0, $args = array() ) {
		$indent = str_repeat("\t", $depth);
		$output .= "\n$indent<ul class=\"sub-menu\">\n";
	}

	/**
	 * @see Walker::end_lvl()
	 * @since 3.0.0
	 *
	 * @param string $output Passed by reference. Used to append additional content.
	 * @param int $depth Depth of page. Used for padding.
	 */
	function end_lvl( &$output, $depth = 0, $args = array() ) {
		$indent = str_repeat("\t", $depth);
		$output .= "$indent</ul>\n";
	}

	/**
	 * @see Walker::start_el()
	 * @since 3.0.0
	 *
	 * @param string $output Passed by reference. Used to append additional content.
	 * @param object $item Menu item data object.
	 * @param int $depth Depth of menu item. Used for padding.
	 * @param int $current_page Menu item ID.
	 * @param object $args
	 */
	function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
		$classes[] = 'menu-item-' . $item->ID;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
		$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

		$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
		$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

		$output .= $indent . '<li' . $id . $value . $class_names .'>';

		$atts = array();
		$atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
		$atts['target'] = ! empty( $item->target )     ? $item->target     : '';
		$atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
		$atts['href']   = ! empty( $item->url )        ? $item->url        : '';

		$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );

		$attributes = '';
		foreach ( $atts as $attr => $value ) {
			if ( ! empty( $value ) ) {
				$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
				$attributes .= ' ' . $attr . '="' . $value . '"';
			}
		}

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '</a>';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}

	/**
	 * @see Walker::end_el()
	 * @since 3.0.0
	 *
	 * @param string $output Passed by reference. Used to append additional content.
	 * @param object $item Page data object. Not used.
	 * @param int $depth Depth of page. Not Used.
	 */
	function end_el( &$output, $item, $depth = 0, $args = array() ) {
		$output .= "</li>\n";
	}
}

/**
 * Displays a navigation menu.
 *
 * Optional $args contents:
 *
 * menu - The menu that is desired. Accepts (matching in order) id, slug, name. Defaults to blank.
 * menu_class - CSS class to use for the ul element which forms the menu. Defaults to 'menu'.
 * menu_id - The ID that is applied to the ul element which forms the menu. Defaults to the menu slug, incremented.
 * container - Whether to wrap the ul, and what to wrap it with. Defaults to 'div'.
 * container_class - the class that is applied to the container. Defaults to 'menu-{menu slug}-container'.
 * container_id - The ID that is applied to the container. Defaults to blank.
 * fallback_cb - If the menu doesn't exists, a callback function will fire. Defaults to 'wp_page_menu'. Set to false for no fallback.
 * before - Text before the link text.
 * after - Text after the link text.
 * link_before - Text before the link.
 * link_after - Text after the link.
 * echo - Whether to echo the menu or return it. Defaults to echo.
 * depth - how many levels of the hierarchy are to be included. 0 means all. Defaults to 0.
 * walker - allows a custom walker to be specified.
 * theme_location - the location in the theme to be used. Must be registered with register_nav_menu() in order to be selectable by the user.
 * items_wrap - How the list items should be wrapped. Defaults to a ul with an id and class. Uses printf() format with numbered placeholders.
 *
 * @since 3.0.0
 *
 * @param array $args Arguments
 */
function wp_nav_menu( $args = array() ) {
	static $menu_id_slugs = array();

	$defaults = array( 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '',
	'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
	'depth' => 0, 'walker' => '', 'theme_location' => '' );

	$args = wp_parse_args( $args, $defaults );
	$args = apply_filters( 'wp_nav_menu_args', $args );
	$args = (object) $args;

	// Get the nav menu based on the requested menu
	$menu = wp_get_nav_menu_object( $args->menu );

	// Get the nav menu based on the theme_location
	if ( ! $menu && $args->theme_location && ( $locations = get_nav_menu_locations() ) && isset( $locations[ $args->theme_location ] ) )
		$menu = wp_get_nav_menu_object( $locations[ $args->theme_location ] );

	// get the first menu that has items if we still can't find a menu
	if ( ! $menu && !$args->theme_location ) {
		$menus = wp_get_nav_menus();
		foreach ( $menus as $menu_maybe ) {
			if ( $menu_items = wp_get_nav_menu_items( $menu_maybe->term_id, array( 'update_post_term_cache' => false ) ) ) {
				$menu = $menu_maybe;
				break;
			}
		}
	}

	// If the menu exists, get its items.
	if ( $menu && ! is_wp_error($menu) && !isset($menu_items) )
		$menu_items = wp_get_nav_menu_items( $menu->term_id, array( 'update_post_term_cache' => false ) );

	/*
	 * If no menu was found:
	 *  - Fall back (if one was specified), or bail.
	 *
	 * If no menu items were found:
	 *  - Fall back, but only if no theme location was specified.
	 *  - Otherwise, bail.
	 */
	if ( ( !$menu || is_wp_error($menu) || ( isset($menu_items) && empty($menu_items) && !$args->theme_location ) )
		&& $args->fallback_cb && is_callable( $args->fallback_cb ) )
			return call_user_func( $args->fallback_cb, (array) $args );

	if ( ! $menu || is_wp_error( $menu ) )
		return false;

	$nav_menu = $items = '';

	$show_container = false;
	if ( $args->container ) {
		$allowed_tags = apply_filters( 'wp_nav_menu_container_allowedtags', array( 'div', 'nav' ) );
		if ( in_array( $args->container, $allowed_tags ) ) {
			$show_container = true;
			$class = $args->container_class ? ' class="' . esc_attr( $args->container_class ) . '"' : ' class="menu-'. $menu->slug .'-container"';
			$id = $args->container_id ? ' id="' . esc_attr( $args->container_id ) . '"' : '';
			$nav_menu .= '<'. $args->container . $id . $class . '>';
		}
	}

	// Set up the $menu_item variables
	_wp_menu_item_classes_by_context( $menu_items );

	$sorted_menu_items = array();
	foreach ( (array) $menu_items as $key => $menu_item )
		$sorted_menu_items[$menu_item->menu_order] = $menu_item;

	unset($menu_items);

	$sorted_menu_items = apply_filters( 'wp_nav_menu_objects', $sorted_menu_items, $args );

	$items .= walk_nav_menu_tree( $sorted_menu_items, $args->depth, $args );
	unset($sorted_menu_items);

	// Attributes
	if ( ! empty( $args->menu_id ) ) {
		$wrap_id = $args->menu_id;
	} else {
		$wrap_id = 'menu-' . $menu->slug;
		while ( in_array( $wrap_id, $menu_id_slugs ) ) {
			if ( preg_match( '#-(\d+)$#', $wrap_id, $matches ) )
				$wrap_id = preg_replace('#-(\d+)$#', '-' . ++$matches[1], $wrap_id );
			else
				$wrap_id = $wrap_id . '-1';
		}
	}
	$menu_id_slugs[] = $wrap_id;

	$wrap_class = $args->menu_class ? $args->menu_class : '';

	// Allow plugins to hook into the menu to add their own <li>'s
	$items = apply_filters( 'wp_nav_menu_items', $items, $args );
	$items = apply_filters( "wp_nav_menu_{$menu->slug}_items", $items, $args );

	// Don't print any markup if there are no items at this point.
	if ( empty( $items ) )
		return false;

	$nav_menu .= sprintf( $args->items_wrap, esc_attr( $wrap_id ), esc_attr( $wrap_class ), $items );
	unset( $items );

	if ( $show_container )
		$nav_menu .= '</' . $args->container . '>';

	$nav_menu = apply_filters( 'wp_nav_menu', $nav_menu, $args );

	if ( $args->echo )
		echo $nav_menu;
	else
		return $nav_menu;
}

/**
 * Add the class property classes for the current context, if applicable.
 *
 * @access private
 * @since 3.0
 *
 * @param array $menu_items The current menu item objects to which to add the class property information.
 */
function _wp_menu_item_classes_by_context( &$menu_items ) {
	global $wp_query, $wp_rewrite;

	$queried_object = $wp_query->get_queried_object();
	$queried_object_id = (int) $wp_query->queried_object_id;

	$active_object = '';
	$active_ancestor_item_ids = array();
	$active_parent_item_ids = array();
	$active_parent_object_ids = array();
	$possible_taxonomy_ancestors = array();
	$possible_object_parents = array();
	$home_page_id = (int) get_option( 'page_for_posts' );

	if ( $wp_query->is_singular && ! empty( $queried_object->post_type ) && ! is_post_type_hierarchical( $queried_object->post_type ) ) {
		foreach ( (array) get_object_taxonomies( $queried_object->post_type ) as $taxonomy ) {
			if ( is_taxonomy_hierarchical( $taxonomy ) ) {
				$term_hierarchy = _get_term_hierarchy( $taxonomy );
				$terms = wp_get_object_terms( $queried_object_id, $taxonomy, array( 'fields' => 'ids' ) );
				if ( is_array( $terms ) ) {
					$possible_object_parents = array_merge( $possible_object_parents, $terms );
					$term_to_ancestor = array();
					foreach ( (array) $term_hierarchy as $anc => $descs ) {
						foreach ( (array) $descs as $desc )
							$term_to_ancestor[ $desc ] = $anc;
					}

					foreach ( $terms as $desc ) {
						do {
							$possible_taxonomy_ancestors[ $taxonomy ][] = $desc;
							if ( isset( $term_to_ancestor[ $desc ] ) ) {
								$_desc = $term_to_ancestor[ $desc ];
								unset( $term_to_ancestor[ $desc ] );
								$desc = $_desc;
							} else {
								$desc = 0;
							}
						} while ( ! empty( $desc ) );
					}
				}
			}
		}
	} elseif ( ! empty( $queried_object->taxonomy ) && is_taxonomy_hierarchical( $queried_object->taxonomy ) ) {
		$term_hierarchy = _get_term_hierarchy( $queried_object->taxonomy );
		$term_to_ancestor = array();
		foreach ( (array) $term_hierarchy as $anc => $descs ) {
			foreach ( (array) $descs as $desc )
				$term_to_ancestor[ $desc ] = $anc;
		}
		$desc = $queried_object->term_id;
		do {
			$possible_taxonomy_ancestors[ $queried_object->taxonomy ][] = $desc;
			if ( isset( $term_to_ancestor[ $desc ] ) ) {
				$_desc = $term_to_ancestor[ $desc ];
				unset( $term_to_ancestor[ $desc ] );
				$desc = $_desc;
			} else {
				$desc = 0;
			}
		} while ( ! empty( $desc ) );
	}

	$possible_object_parents = array_filter( $possible_object_parents );

	$front_page_url = home_url();

	foreach ( (array) $menu_items as $key => $menu_item ) {

		$menu_items[$key]->current = false;

		$classes = (array) $menu_item->classes;
		$classes[] = 'menu-item';
		$classes[] = 'menu-item-type-' . $menu_item->type;
		$classes[] = 'menu-item-object-' . $menu_item->object;

		// if the menu item corresponds to a taxonomy term for the currently-queried non-hierarchical post object
		if ( $wp_query->is_singular && 'taxonomy' == $menu_item->type && in_array( $menu_item->object_id, $possible_object_parents ) ) {
			$active_parent_object_ids[] = (int) $menu_item->object_id;
			$active_parent_item_ids[] = (int) $menu_item->db_id;
			$active_object = $queried_object->post_type;

		// if the menu item corresponds to the currently-queried post or taxonomy object
		} elseif (
			$menu_item->object_id == $queried_object_id &&
			(
				( ! empty( $home_page_id ) && 'post_type' == $menu_item->type && $wp_query->is_home && $home_page_id == $menu_item->object_id ) ||
				( 'post_type' == $menu_item->type && $wp_query->is_singular ) ||
				( 'taxonomy' == $menu_item->type && ( $wp_query->is_category || $wp_query->is_tag || $wp_query->is_tax ) && $queried_object->taxonomy == $menu_item->object )
			)
		) {
			$classes[] = 'current-menu-item';
			$menu_items[$key]->current = true;
			$_anc_id = (int) $menu_item->db_id;

			while(
				( $_anc_id = get_post_meta( $_anc_id, '_menu_item_menu_item_parent', true ) ) &&
				! in_array( $_anc_id, $active_ancestor_item_ids )
			) {
				$active_ancestor_item_ids[] = $_anc_id;
			}

			if ( 'post_type' == $menu_item->type && 'page' == $menu_item->object ) {
				// Back compat classes for pages to match wp_page_menu()
				$classes[] = 'page_item';
				$classes[] = 'page-item-' . $menu_item->object_id;
				$classes[] = 'current_page_item';
			}
			$active_parent_item_ids[] = (int) $menu_item->menu_item_parent;
			$active_parent_object_ids[] = (int) $menu_item->post_parent;
			$active_object = $menu_item->object;

		// if the menu item corresponds to the currently-requested URL
		} elseif ( 'custom' == $menu_item->object ) {
			$_root_relative_current = untrailingslashit( $_SERVER['REQUEST_URI'] );
			$current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_root_relative_current );
			$raw_item_url = strpos( $menu_item->url, '#' ) ? substr( $menu_item->url, 0, strpos( $menu_item->url, '#' ) ) : $menu_item->url;
			$item_url = untrailingslashit( $raw_item_url );
			$_indexless_current = untrailingslashit( preg_replace( '/' . preg_quote( $wp_rewrite->index, '/' ) . '$/', '', $current_url ) );

			if ( $raw_item_url && in_array( $item_url, array( $current_url, $_indexless_current, $_root_relative_current ) ) ) {
				$classes[] = 'current-menu-item';
				$menu_items[$key]->current = true;
				$_anc_id = (int) $menu_item->db_id;

				while(
					( $_anc_id = get_post_meta( $_anc_id, '_menu_item_menu_item_parent', true ) ) &&
					! in_array( $_anc_id, $active_ancestor_item_ids )
				) {
					$active_ancestor_item_ids[] = $_anc_id;
				}

				if ( in_array( home_url(), array( untrailingslashit( $current_url ), untrailingslashit( $_indexless_current ) ) ) ) {
					// Back compat for home link to match wp_page_menu()
					$classes[] = 'current_page_item';
				}
				$active_parent_item_ids[] = (int) $menu_item->menu_item_parent;
				$active_parent_object_ids[] = (int) $menu_item->post_parent;
				$active_object = $menu_item->object;

			// give front page item current-menu-item class when extra query arguments involved
			} elseif ( $item_url == $front_page_url && is_front_page() ) {
				$classes[] = 'current-menu-item';
			}

			if ( untrailingslashit($item_url) == home_url() )
				$classes[] = 'menu-item-home';
		}

		// back-compat with wp_page_menu: add "current_page_parent" to static home page link for any non-page query
		if ( ! empty( $home_page_id ) && 'post_type' == $menu_item->type && empty( $wp_query->is_page ) && $home_page_id == $menu_item->object_id )
			$classes[] = 'current_page_parent';

		$menu_items[$key]->classes = array_unique( $classes );
	}
	$active_ancestor_item_ids = array_filter( array_unique( $active_ancestor_item_ids ) );
	$active_parent_item_ids = array_filter( array_unique( $active_parent_item_ids ) );
	$active_parent_object_ids = array_filter( array_unique( $active_parent_object_ids ) );

	// set parent's class
	foreach ( (array) $menu_items as $key => $parent_item ) {
		$classes = (array) $parent_item->classes;
		$menu_items[$key]->current_item_ancestor = false;
		$menu_items[$key]->current_item_parent = false;

		if (
			isset( $parent_item->type ) &&
			(
				// ancestral post object
				(
					'post_type' == $parent_item->type &&
					! empty( $queried_object->post_type ) &&
					is_post_type_hierarchical( $queried_object->post_type ) &&
					in_array( $parent_item->object_id, $queried_object->ancestors ) &&
					$parent_item->object != $queried_object->ID
				) ||

				// ancestral term
				(
					'taxonomy' == $parent_item->type &&
					isset( $possible_taxonomy_ancestors[ $parent_item->object ] ) &&
					in_array( $parent_item->object_id, $possible_taxonomy_ancestors[ $parent_item->object ] ) &&
					(
						! isset( $queried_object->term_id ) ||
						$parent_item->object_id != $queried_object->term_id
					)
				)
			)
		) {
			$classes[] = empty( $queried_object->taxonomy ) ? 'current-' . $queried_object->post_type . '-ancestor' : 'current-' . $queried_object->taxonomy . '-ancestor';
		}

		if ( in_array(  intval( $parent_item->db_id ), $active_ancestor_item_ids ) ) {
			$classes[] = 'current-menu-ancestor';
			$menu_items[$key]->current_item_ancestor = true;
		}
		if ( in_array( $parent_item->db_id, $active_parent_item_ids ) ) {
			$classes[] = 'current-menu-parent';
			$menu_items[$key]->current_item_parent = true;
		}
		if ( in_array( $parent_item->object_id, $active_parent_object_ids ) )
			$classes[] = 'current-' . $active_object . '-parent';

		if ( 'post_type' == $parent_item->type && 'page' == $parent_item->object ) {
			// Back compat classes for pages to match wp_page_menu()
			if ( in_array('current-menu-parent', $classes) )
				$classes[] = 'current_page_parent';
			if ( in_array('current-menu-ancestor', $classes) )
				$classes[] = 'current_page_ancestor';
		}

		$menu_items[$key]->classes = array_unique( $classes );
	}
}

/**
 * Retrieve the HTML list content for nav menu items.
 *
 * @uses Walker_Nav_Menu to create HTML list content.
 * @since 3.0.0
 * @see Walker::walk() for parameters and return description.
 */
function walk_nav_menu_tree( $items, $depth, $r ) {
	$walker = ( empty($r->walker) ) ? new Walker_Nav_Menu : $r->walker;
	$args = array( $items, $depth, $r );

	return call_user_func_array( array($walker, 'walk'), $args );
}

/**
 * Prevents a menu item ID from being used more than once.
 *
 * @since 3.0.1
 * @access private
 */
function _nav_menu_item_id_use_once( $id, $item ) {
	static $_used_ids = array();
	if ( in_array( $item->ID, $_used_ids ) )
		return '';
	$_used_ids[] = $item->ID;
	return $id;
}
add_filter( 'nav_menu_item_id', '_nav_menu_item_id_use_once', 10, 2 );

Open in new window

0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40535091
I have edited your style.css
<ul id="menu-left-menu" class="nav-menu">

#menu-left-menu {
float: left;
text-align: right;
width: 40%;
}

I have removed "margin-top: -9%;", and the main menu got repositioned at the top.
Now, the child element (submenu) needs a margin/padding adjustment to remove the span in between "SUNLESS?" and the submenu.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40535295
You might also want to re-crop your logo as it still has whitespace on the left and top.
0
 

Author Comment

by:Donnie Walker
ID: 40536660
Rob, I did resize the logo and I think it looks better now.

I've somehow got everything like I wanted (not quit sure what I did from all your suggestions (Rob, Tom, Emmit, etc)

But now I have another problem.

The site use to be responsive.

When I tested it with my browsers and changed the window size the images would change, the text would flow with the size change, and the left menu would appear over the log and the right menu would flow under the logo.
 
It was perfect.

But now when I test it for mobile nothing changes,  it's like everything is locked.

I'm not sure what I did wrong.

And finally the logo has some sort of shadow around it that wasn't there before.

If I had hair still I would have pulled it out by know.
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40536677
"Fluid" (mobile) design "hates" hardcoding such as 12px instead or 1.2em.
The outermost element should have max-width: 320px; (to fit on iPhone screen).
Here's an example of HTML/CSS I've written for both mobile and conventional display:
Fluid Web Design Example
It's not using Wordpress, though.
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40536688
The example site sets "viewport" to "width=320; initial-scale=0.9; maximum-scale=1.0; user-scalable=0;" once it detects mobile browser.
0
 

Author Comment

by:Donnie Walker
ID: 40536776
Tom, what would you charge me to just fix the style sheet to look like my design and make it mobile. I changed the px to rem and it just make the damn fonts smaller.

I'm getting frustrated.
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40536807
Donnie, I don't think this forum is about work-for-hire. To work with rem out of memory, it would take somebody who eats Wordpress for breakfast, lunch and dinner.
To disable "rem" and to use "classic" CSS, you may want to remove the |\.css from .htaccess. The result will be, the CSS will be rendered "as is" (which may require redoing your current style.css). But then Rob and I would be able to be of more help.
Before you do that, please take a peek about the meta "viewport": Using Viewport for mobile browsers
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40536818
Speaking of Wordpress .htaccess. When the below is used, .css is among the file extensions that do not get processed by the PHP and are rendered as requested:
RewriteCond %{REQUEST_URI} !(\.txt|\.css|\.js|\.jpg|\.jpeg|\.png|\.gif|\.ico|\.xml)$
0
 

Author Comment

by:Donnie Walker
ID: 40536821
Looks like I don't have a \.css in my /.htaccess :

# BEGIN WPSuperCache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /nofryzone/
#If you serve pages from behind a proxy you may want to change 'RewriteCond %{HTTPS} on' to something more sensible
AddDefaultCharset UTF-8
RewriteCond %{REQUEST_URI} !^.*[^/]$
RewriteCond %{REQUEST_URI} !^.*//.*$
RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress_logged_in|wp-postpass_).*$
RewriteCond %{HTTP:X-Wap-Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP:Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*(2.0\ MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|PlayStation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows\ CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915\ Obigo|LGE\ VX|webOS|Nokia5800).* [NC]
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{HTTPS} on
RewriteCond %{DOCUMENT_ROOT}/nofryzone/wp-content/cache/supercache/%{SERVER_NAME}/nofryzone/$1/index-https.html.gz -f
RewriteRule ^(.*) "/nofryzone/wp-content/cache/supercache/%{SERVER_NAME}/nofryzone/$1/index-https.html.gz" [L]

RewriteCond %{REQUEST_URI} !^.*[^/]$
RewriteCond %{REQUEST_URI} !^.*//.*$
RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress_logged_in|wp-postpass_).*$
RewriteCond %{HTTP:X-Wap-Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP:Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*(2.0\ MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|PlayStation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows\ CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915\ Obigo|LGE\ VX|webOS|Nokia5800).* [NC]
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{HTTPS} !on
RewriteCond %{DOCUMENT_ROOT}/nofryzone/wp-content/cache/supercache/%{SERVER_NAME}/nofryzone/$1/index.html.gz -f
RewriteRule ^(.*) "/nofryzone/wp-content/cache/supercache/%{SERVER_NAME}/nofryzone/$1/index.html.gz" [L]

RewriteCond %{REQUEST_URI} !^.*[^/]$
RewriteCond %{REQUEST_URI} !^.*//.*$
RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress_logged_in|wp-postpass_).*$
RewriteCond %{HTTP:X-Wap-Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP:Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*(2.0\ MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|PlayStation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows\ CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915\ Obigo|LGE\ VX|webOS|Nokia5800).* [NC]
RewriteCond %{HTTPS} on
RewriteCond %{DOCUMENT_ROOT}/nofryzone/wp-content/cache/supercache/%{SERVER_NAME}/nofryzone/$1/index.html -f
RewriteRule ^(.*) "/nofryzone/wp-content/cache/supercache/%{SERVER_NAME}/nofryzone/$1/index.html" [L]

RewriteCond %{REQUEST_URI} !^.*[^/]$
RewriteCond %{REQUEST_URI} !^.*//.*$
RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress_logged_in|wp-postpass_).*$
RewriteCond %{HTTP:X-Wap-Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP:Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*(2.0\ MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|PlayStation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows\ CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915\ Obigo|LGE\ VX|webOS|Nokia5800).* [NC]
RewriteCond %{HTTPS} !on
RewriteCond %{DOCUMENT_ROOT}/nofryzone/wp-content/cache/supercache/%{SERVER_NAME}/nofryzone/$1/index.html -f
RewriteRule ^(.*) "/nofryzone/wp-content/cache/supercache/%{SERVER_NAME}/nofryzone/$1/index.html" [L]
</IfModule>

# END WPSuperCache

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /nofryzone/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /nofryzone/index.php [L]
</IfModule>

# END WordPress
0
 

Author Comment

by:Donnie Walker
ID: 40536838
I  added that to my .htacess amd nothing changed.
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40536841
The below will exclude txt, css, jpg, jpeg etc file extensions from being processed by the Wordpress as PHP code:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /nofryzone/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.txt|\.css|\.js|\.jpg|\.jpeg|\.png|\.gif|\.ico|\.xml)$
RewriteRule . /nofryzone/index.php [L]
</IfModule>
# END WordPress
0
 

Author Comment

by:Donnie Walker
ID: 40536845
I added that one also.
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40536853
If you have added, and nothing has changed, I take a disclaimer on the part of the Wordpress Caching module. Can you remove everything except for the lines between (and including) #BEGIN Wordpress/#END Wordpress to find the culprit?
0
 
LVL 4

Accepted Solution

by:
Tom Chadaravicius earned 222 total points
ID: 40536873
Here's the .htaccess I use for a web application at my work. I have changed directory name to obscure my job and to comply with NC/NDA. It presumes that /nofryzone is a child of public_html (or otherwise named "root"):

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteBase /nofryzone
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteCond %{REQUEST_URI} !(\.txt|\.css|\.js|\.jpg|\.jpeg|\.png|\.gif|\.ico|\.xml)$
RewriteRule . /nofryzone/index.php [L]

</IfModule>
0
 

Author Comment

by:Donnie Walker
ID: 40536889
ok, I change it. What next?
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40536894
Okay, I have looked at your page now. Isn't this closer to what you have originally wanted? (I can see the menu on the top; I am using Chrome).
*To address the mobile display, please look at meta viewport (I have quoted above)
P.S. I may have to be excused soon - work.
0
 

Author Closing Comment

by:Donnie Walker
ID: 40541015
thanks. I'm going to try something else.
0
 
LVL 4

Expert Comment

by:Tom Chadaravicius
ID: 40541430
If need be, I will be able to get deeper into this to help you over the weekend (including this Friday evening)
I also thank Rob for the guidance while moderating this thread.
0
 

Author Comment

by:Donnie Walker
ID: 40541435
thanks, I appreciate that but I think I've got it. I started from scratch.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40541474
Glad to hear you've got it, even if you did have to start from scratch.  Kudos to Tom for persisting with the question too.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. 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 : Open Page or Post…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…

758 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

14 Experts available now in Live!

Get 1:1 Help Now