ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   7vyse
   Member

   Hello all,

   First, great to see such a lively community of support! It can be difficult when dealing with WP. You never know what has a following and what doesn't.

   Now, onto the actual problem: I'm trying to style my drop down menu. The very simple summary is that the drop down menu isn't working, period. It appears to show up BELOW the #main div. Then, it re-aligns itself to the left side.

   I really don't know where the issue could be. I can't really debug; when I use Chrome tools to go through the code, I can't isolate any of the styles to play around. I have made several modifications to the .menu class using CSS, and that seems to have been the breaking point.

   The issue and the site can be seen at nadinekaslow.com/campaign

   The drop down menu can be found on the top navigation bar, under the title "Support & Endorse" Any help at all would be greatly appreciated.

   Thank you!

   Posted 1 year ago #
2. 

   Jagst3r15
   Member

   I don't think you are using superfish for some reason. I see your styles aren't for .sf-menu, etc.

   Try modding adding this (make a copy of the original first to add the colors back in!):

   /* =Menu
   -------------------------------------------------------------- */
   
   .skip-link {
       display:none;
   }
   #access {
       border-bottom:1px solid #ccc;
       height:32px;
       font-size:13px;
       overflow:visible;
       z-index:100;
   }
   /*** ESSENTIAL STYLES ***/
   .sf-menu, .sf-menu * {
   	margin:			0;
   	padding:		0;
   	list-style:		none;
   }
   .sf-menu {
   	line-height:	1.0;
   }
   .sf-menu ul {
   	position:		absolute;
   	top:			-999em;
   	width:			10em; /* left offset of submenus need to match (see below) */
   }
   .sf-menu ul li {
   	width:			100%;
   }
   .sf-menu li:hover {
   	visibility:		inherit; /* fixes IE7 'sticky bug' */
   }
   .sf-menu li {
   	float:			left;
   	position:		relative;
   }
   .sf-menu a {
   	display:		block;
   	position:		relative;
   }
   .sf-menu li:hover ul,
   .sf-menu li.sfHover ul {
   	left:			0;
   	top:			2.5em; /* match top ul list item height */
   	z-index:		99;
   }
   ul.sf-menu li:hover li ul,
   ul.sf-menu li.sfHover li ul {
   	top:			-999em;
   }
   ul.sf-menu li li:hover ul,
   ul.sf-menu li li.sfHover ul {
   	left:			10em; /* match ul width */
   	top:			0;
   }
   ul.sf-menu li li:hover li ul,
   ul.sf-menu li li.sfHover li ul {
   	top:			-999em;
   }
   ul.sf-menu li li li:hover ul,
   ul.sf-menu li li li.sfHover ul {
   	left:			10em; /* match ul width */
   	top:			0;
   }
   
   /*** THEMATIC SKIN ***/
   .sf-menu {
       border-right:1px solid #ccc;
   	float:left;
   }
   .sf-menu a {
   	border-left:1px solid #ccc;
   	border-top:1px solid #ccc;
   	border-bottom:1px solid #ccc;
   	padding:9px 13px;
   	text-decoration:none;
   }
   .sf-menu .current_page_item a,
   .sf-menu .current_page_ancestor a,
   .sf-menu .current_page_parent a {
       border-bottom-color:#fff;
   }
   .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
   	color:			#666;
   }
   .sf-menu li {
   	background:		#fff;
   }
   .sf-menu li li {
   	background:		#fff;
   }
   .sf-menu li li li {
   	background:		#9AAEDB;
   }
   .sf-menu li:hover, .sf-menu li.sfHover,
   .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
       background:     #fafafa;
   	outline:		0;
       border-bottom-color:#ccc;
   }
   .sf-menu ul {
       border-right:1px solid #ccc;
       border-bottom:1px solid #ccc;
   }
   .sf-menu li:hover ul,
   .sf-menu li.sfHover ul {
   	top:32px; /* overriding essential styles */
   }
   .sf-menu ul ul {
       margin-top:0;
   }
   .sf-menu ul a {
       background:#fafafa;
   	border-bottom:none;
   }
   .sf-menu ul a:hover {
       color: #FF4B33;
   }

   in place of this:

   #access {
   	height:40px;
   	width:100%;
   	background-color:#6d3c95;
   }
   
   .skip-link {
   	height:0px;
   	width:1px;
   	margin-left:-999px;
   }
   
   .menu {
   	margin-top:10px;
   	display:block;
   	position:relative;
   }
   
   /* color and width should be set to id access. Position should be set to menu. Access is the block which holds while menu is the content that fills. */
   
   .menu ul {
   	margin:0px;
   	padding:0px;
   }
   
   li.page_item {
   	float:left;
   	display:block;
   }
   
   li.page_item a {
   	font-family:OpenSansLight, Georgia, serif;
   	text-decoration:none;
   	font-size:14px;
   	color:#FFFFFF;
   	padding:12px 30px 12px;
   }
   
   li.page_item a:hover {
   	color:#6D3C95;
   	background-color:#DDDBEE;
   }
   
   ul.children {
   }
   
   ul.children li {
   	color:#000;
   }

   Posted 1 year ago #
3. 

   7vyse
   Member

   Jagst, thank you so much! That did it.

   Just one question: What exactly did I add? And why didn't Thematic have it to begin with? I installed the most recent version, too.

   Posted 1 year ago #
4. 

   helgatheviking
   Moderator

   i'm not sure what happened, but to steal a line from my kettlebell training, "it's your fault, comrade".... well probably.

   are you using this thematic?
   http://developing.thematic4you.com/thematic-development-release/

   which is pretty out of date, when compared to the google SVN version, but that one isn't "official". i should email gene on that point.

   anyway, thematic's menu works out of the box or we'd have heard about it before now. you must've done something to not include those styles. did you copy the sample child theme? are you using @import to import the default thematic styles to your child theme?

   looking at your stylesheet

   /* Reset browser defaults */
   @import url('reset.css');
   
   /* Imports and Names non-native fonts */
   @import url('fontface.css');
   
   /* Apply basic typography styles */
   @import url('typography.css');
   
   /* Apply a basic layout */
   @import url('library/layouts/2c-r-fixed.css');
   
   /* Apply basic image styles */
   @import url('library/styles/images.css');
   
   /* Apply default theme styles and colors */
   @import url('library/styles/default.css');
   
   /* Prepare theme for plugins */
   @import url('library/styles/plugins.css');

   your imports look like they have the wrong paths (unless you copied them into your child theme. please see the sample child theme in the thematic folder, the proper path would look like this:

   @import url('../thematic/library/styles/typography.css');

   Posted 1 year ago #
5. 

   7vyse
   Member

   Helga,

   As to where I got Thematic from… no clue. I think I made a child-theme off an install I have had for a while. Could have been Google, or, through WP's native Theme searching function.

   EDIT: Meta data in thematic's default stylesheets point to themeshaper as the URL and Ian Stewart as the author. Not sure if that gives you more information.

   As to the imports:

   The default css files that I have edited, I have copied to the child theme's folder. (Copied and not moved). So where you see differences, I have made edits to those files.

   (I am a big organization fiend when it comes to coding. I am not a fan of CSS pages that are 2,000 lines of code. I like to split my spaces up: a sheet for layout, typography, etc.)

   That said: did I do the wrong thing? Do you foresee issues with making copies of the stylesheets and relocating them?

   Posted 1 year ago #
6. 

   helgatheviking
   Moderator

   doesn't really tell me much, even going forward it will probably still have Ian's name on it even though he works at automattic and hasn't been involved with thematic for years.

   you didn't do the wrong thing by moving them.. you can do what you will with them... you just have to point your @imports to the right path is all.

   download the thematic i linked you to, use that as your parent and take a look at the sample that is included. your paths are wrong.

   chrome's dev tools reports the errors confirming my suspicions:

   Failed to load resource: the server responded with a status of 404 (Not found)
   http://www.nadinekaslow.com/campaign/wp-content/themes/thematic-child/library/layouts/2c-r-fixed.cssFailed to load resource: the server responded with a status of 404 (Not found)
   http://www.nadinekaslow.com/campaign/wp-content/themes/thematic-child/library/styles/images.cssFailed to load resource: the server responded with a status of 404 (Not found)
   http://www.nadinekaslow.com/campaign/wp-content/themes/thematic-child/library/styles/default.cssFailed to load resource: the server responded with a status of 404 (Not found)
   http://www.nadinekaslow.com/campaign/wp-content/themes/thematic-child/library/styles/plugins.cssFailed to load resource: the server responded with a status of 404 (Not found)

   Posted 1 year ago #
7. 

   7vyse
   Member

   Where is the link again to the proper Thematic?

   Last question: when I change the parent, you think it'll royally break everything?

   Posted 1 year ago #
8. 

   helgatheviking
   Moderator

   http://developing.thematic4you.com/thematic-development-release/

   it shouldn't... but depending on what version you were using there could've been 1 or 2 tweaks with the menu. the biggest differences came in the code, the styles are similar. if you come across something that royally breaks, just start a new thread w/ a new question.

   Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.