tomparker

The above comments are all good, but you have to realize converting an ecommerce site of this magnitude to mobile is big undertaking. I suggest that you look into whatever CMS/ecommerce software that you are using and see if they offer some responsive themes. That would be a good start, then you will still need to understand the media queries to nail down your 'customization'

tomparker

oops, in my previous post above, i typed the url for my own project incorrectly! ...jeez. The correct url is http://two-sisters-boutique.com

tomparker

@lastMitch

I thought I posted a response to this yesterday but apparently it didn't save, maybe I was timed out...anyway, I resolved the problem by adding the following css:

ul#topnav li:hover > .sub2  {
    opacity: 1;
    display: block;
}

I also took out the lines that I had added to the navmenu.js, pertaining to .sub2., which was applying hoverIntent.

btw, sorry if I wasn't clear enough on the location of the css for sub2, it's on the index page in the header. The topnav.css file is the css 'cut' from the minified css file, just for reference, it's not being loaded.

Thanks for your time looking into it!

tomparker

@LastMitch

I tried what you suggested, also modifying the css reflecting that the ul was no longer there, but it didn't work. I'm pretty sure I need the ul to remain, because worship, and teaching are a 'sub list' of Sunday Services. I'm thinking the issue is more along the lines of the hoverIntent script is displaying the sub2 div when 'Channels" is hovered over, becuause it's a child of the sub div. I need to prevent that from happening.

Any ideas?

tomparker

Thanks @LastMitch for checking it out. I've created a subdirectory on my server as a 'work area' with a trimmed down version of the page and files involved. http://web101marketing.com/msm Here you can see how the worship and teaching dropdown is displayed as soon as you hover over channels. I don't want that displayed until 'sunday services is hovered over. As it is now, once you hover over 'Sunday Services' and then hover out, it works as it should, as long as the pointer stays inside the menu.

I have the css code for the 'dropdown', on the index page itself. The css for the megamenu is in a minified file on the morningstar website, but I have a copy of the 'non-minified' code that pertains to the menu in http://web101marketing.com/msm/topnav.css

tomparker

This may be a little 'outside the box' as far as mega menu's go, but I'm trying to do a 'flyout' or submenu off of a mega. Take a look at http://morningstartv.com, and hover over 'Channels'. When 'Sunday Services' is hovered over, I want a menu to appear to the right, like the next level in a dropdown. I actually have that working, but the problem is, when Channels is hovered over, it's displaying the submenu, when I only want that to be displayed when 'Sunday Services' is hovered over.

I can post the code that i have done to try to make this work, but before doing that, I thought it might be best to throw this out there and get feedback on how to make this happen.

btw, I have suggested to the client some alternatives that would totally replace this , but it would be good to get it working in the interim if possible.

Thanks,
Tom

tomparker

Ok, I see what you're asking now. This goes back to what I mentioned in my earlier response about using 'nav' as an id, and also using 'nav' as a class. It's best to use different names to avoid confusion. When you see the #nav, in the code above, that's refering to the id of the navbar, and when you see '.nav' that's refering to the class assigned to the

    elements.

    Again I recommend you change your class name to something else... but.. bottom line, in your current situation, ul.nav li, is referencing the same element as if you have #nav ul.nav li . Actually the latter is the more 'correct' version.

tomparker

You are welcome for the help @cobra98! From what you described in your previous post, and then looking at the code here, it appears that no image is being loading for the button when it is selected, but that just the background color and border color are changed.

Whether WYSIWYG, or hand coded, the end result should be the same, for the most part. I don't know what your asking regarding the creation of the the ul.nav li.

tomparker

@Cobra98 I'll be glad to help. If you take a look at the code that I posted a couple of weeks ago you will see that your html is very similar.

As far as understanding the ul class, I'll get to that, but first of all what might be causing some confusion is that in your code the div has an id of 'nav', and your ul has a class of 'nav'. That will work, but it makes it really easy to make a mistake and get the two confused in your css file.

When you refer to an id in your css file, precede it with a '#" and when you refer to a class in your css file, you precede it with a '.' So in your present case you will have a #nav { ...properties for your div ...}; and a .nav { ...properties for your ul..};

As a rule of thumb, use an id for things that will only be used once in the document, and a class for things that may be applied to multiple elements. An id can only be used once, but sometimes you will see a class used for something that could have been an id(just used once)... make sense?

I suggest that in your html as shown above, first...change your ul class name to something else, like 'navList', just to help avoid avoid a possible mistake in your css.

second... change class='selected' to id='selected' (you will never have more than one ...

tomparker

Consider going with WordPress and Jigoshop. Jigoshop is a free community developed/supported platform. Some themes and plugins are available for a price, but very affordable. I've done one project with it so far which is still under development, but close to completion. http://twosistersboutique.com/

tomparker

What you are talking about is not really a backlink at all. All the content is on the same domain. If you post something on your blog and you want to link to another page on your 'main' site that it's related to, then by all means do it. Don't do it for the purpose of getting more backlinks, because it's not really a back-link at all. The only backlinks that count for anything to search engines are 'quality' links from external sites to yours. What you are doing is internal linking.

When it comes to internal linking, some people try to do 'link scuptling', where they are trying to control the 'link juice' of pages. For the most part, this is an exercise in futility. You do want to link from many of your subpages, to pages that you see as the most important, but trying to control the 'juice' is a waste of time. Write good content, organize it in a meaningful way, and link as such.

tomparker

I welcomed you in another thread, but welcome again! I'm curious what you have in mind when you say 'partner up'. Leave more details here or feel free to contact me through my contact info posted on my website. Good Luck with your venture and I look forward to learning more about your project!

tomparker

Thanks mayobrains! Welcome to you too! I checked out your profile, your short bio is pretty cool! I'll check out your intro in a few.

tomparker

Thanks Michael!

tomparker

@michael Actually, Google is how I came across this thread. I was experiencing a 'flakey' problem with a menu I was working on, and searched Google to see if I could find something where someone else had a similar problem.

After viewing a couple of the results, I just went back to one of my prior projects, to see what I had done differently there. I suppose I should have just done that first, but I was thinking that what I was doing on the current project WAS the same as I did before, but that I was just missing something. Anyway... bottom line, turns out I wasn't doing it exactly as I had before, and by duplicating my original code, resolved the problem...so.. I posted the code here.

I do know exactly what you mean though about people not taking the time to researching on their own, before they post questions on forums. Many times the answer is all over the place on the net. Just Google It! ha

btw, I saw one very 'complicated' solution on another site, so that was a reason for me posting here, even though the thread is old.

tomparker

Hey everyone! I'm looking forward to being a part of the community. I'll answer questions when I can, and I'll be posting questions for you 'gurus' out there that can shed some light on problems that I encounter.

Recently I've been getting more into responsive design on the WordPress platform. I have a few eCommerce projects under my belt using custom code, Avactis, and Jigoshop.

I'm really loving using Catalyst recently. I guess I'm still considered a 'newbie' with it, but it is awesome!

Tom

tomparker

@michael I'm sure the original person who posted found a solution a long time ago. I added this solution for other's who may be searching today. I often find answers to problems in forums where the thread was started years prior. Just putting in my two cents! :)

tomparker

Just some basics here, but you are going to want to set up a print style sheet, i.e. print.css. Add it to your html as such:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Then as a minimum just for your issue try this:

.box {
width: 100%; margin: 0; float: none;
}

I haven't tested this, but it might get you on the right track. See this article for more info: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

tomparker

Save yourself a lot of time and trouble and purchase BackupBuddy from ithemes. http://ithemes.com/purchase/backupbuddy/

tomparker

There's a fairly simple solution to this. Assign an id to your list items in your html on each page, and then just ad one entry to your css as follows. The example below changes the Home page link color from off-white to gray. (also underlines on hover)

<div id="nav-bar">
    <ul>
      <li id="selected"><a href="index.html">Home</a></li>
      <li><a href="page2.html">Page2</a></li>
      <li><a href="page3.html">Page3</a></li>
    </ul>
</div>

#nav-bar ul {
    float : left;
    list-style : none;
    margin : 0;
    padding : 0;
}

#nav-bar ul li {
    display : inline;
}

#nav-bar ul li a {
    display: inline;
    float : left;
    padding : 0 10px;
    color : #EDEDED;
    text-decoration : none;
}

#nav-bar ul li a:hover {
    color : #AAAAAA;
}

#nav-bar ul li#selected a {   /* this changes color of the menu item of current page */
    color : #AAAAAA;
}