Crosshatch skin navigation problem

[doublet]

Hi I'm using the new Crosshatch skin on version 5.2.1

First I noticed that if you have more categories than 5 or 6 the navigation includes another row to accomodate it, which would be fine IF it also included the navigation background file.....but it did not so the new row was on white and hard to see.

I used the css to widen the navigation so all the categories the client want fit on the one row but I can't get it to center.

 

Can someone please advise on what to add in either of the css of the Crosshatch skin to center the navigation AND please tell me what to add so that If I wanted two rows of navigation the background graphic would be there?

 

Thank you so much, here is the url to store in question http://www.supremeequinedesign.com

Debby

[Toucan Web Design]

Hi Debby,

 

I have looked at your website and to align the menu in the centre you will need to do the following, NOTE: the details below are based off of your code not the default crosshatch skin.

 

Making the header larger can be done by increasing the height of #nav and #nav .navContainer, just add a larger background image or replace with a solid colour.

 

Add text-align: center; to .navContainer on common.css line 223

#nav .navContainer {
height: 66px;
margin: 0 auto;
width: 100%;
text-align: center;
}

Remove float: left and add display: inline-block to ul.dropdown li on dropdown.css line 13

ul.dropdown li {
zoom: 1;
display: inline-block;
}

Then you'll maybe want to set a fixed width and perhaps display: block; on the sub categories to ensure they display correctly.

 

Kind Regards,

 

David.

[doublet]

Thank you for your help! I opted for using the default crosshatch skin and used your instructions to change the size of the background image. When I did it the other way it scewed all the cats in the drop downs which, like you said, would have required many more style changes to fix.

[doublet]

Ok I just tested this in I.E. and the drop downs which display perfectly in Firefox only have a background color where the text is. It looks AWFUL.

 

The folowing is how it looks in Firefox

 

 

 

And here is how it looks in Internet Explorer!

 

 

!! I am  not a expert with .css.  As many instances of Cube Cart that I've installed and designed over many years and many versions... I've never had these problems with the default skins! This new one is very nice, so modern looking and I'd like to be able to use it.

[doublet]

Hi, I put the original common and dropdown default .css files back in place, just in case I might have made a mistake.   However the screen shot above of how the dropdowns look in I.E. is Still a accurate representation.

Can anyone help with this? Since this is a default skin within Cube Cart I think it should work better than this.

I appreciate any help you all can give.

[doublet]

Toucan since you are the skin designer of this default skin, I would think you'd have a fix for this cross browser problem?

Do you think you could take another look at this and provide a fix for how this looks in Internet Explorer? I'd sure appreciate the courtesy of another look, I'd really like to use this skin. Thank you, Debby

[bsmither]

Would you try something for me?

 

In the dropdown.css file, at line 22, change:

ul.dropdown li.hover, ul.dropdown li:hover {

 

to

ul.dropdown li:hover, ul.dropdown li:hover {

 

Note the period between li and hover. That should be a colon.

 

Well, maybe not. I see other li.hover css rules, so I don't know if this is legit.

 

There are no templates that have tags with a class of hover.

[bsmither]

Scratch all the above.

 

Try this:

 

In the skin's ie.css file, at the top, change:

ul.dropdown ul li {
    display: inline;
    width: 100%;
}

to

ul.dropdown ul li {
    display: block;
    width: 100%;
}

[doublet]

Thank you bsmither! this worked.

Now I can go forward with finishing the look of the navigation. I appreciate the time you took to help me with this.

 

How it looks in I.E. now

 

 

 

eta: This really should be addressed and added as a fix in future downloads.

.