Help needed with some custom CSS

[TemplateRepo]

Linky: Home

The bit I’m trying to change is this…

For the background: This is my usual store script, the main store is here: store Over the last month I’ve been having a lot of customization work done to the script to bring it up to date with recent requirements. One such customisation is to enable me to add the category menu from the main store script (/store) onto any page on the site.

The bit circled above, that I’m trying to edit, is said category menu.

I’m trying to get it to align centre, but it’s being a bit of a pig to dig out the bit of CSS I need to overnight.

The actual nav items are inside a few containers, like …

And the nav items themselves have a fair few alignment classes, but no matter what I change I can not get things to align center.

Anyone able to help?

I should add that I can’t do this by dropping the whole menu into a container that is the same width as the menu and applying equal margins, as this menu will change size as clients add categories to their store.

A test page with just the menu is here: test

[tav]

.scContainer>div{
    text-align: center;
}
.scContainer>div>ul{
    display: inline-block;
}

[TemplateRepo]

Perfect, thanks Tav.

I did a bit of Google and discovered I needed to wrap it in a div with centre align then apply the display bit to the actual class, but still could nail it down!

[TemplateRepo]

Thanks again for the help on that last night @tav av. I only got a quick look at it after getting back in, but have got it all working perfectly now.

I do have another question though, if I may…

An issue I knew I’d hit with the upgrade is that when the script for the category block is added via an HTML stack if there are any dropdowns, they won’t be visible unless the HTML block has padding added to to the bottom.

Without padding…

With padding…

This is all good, I knew this would happen and hoped the padding thing would fix it, it did, phew!

That obviously now means that any content below is going to be shoved down the page by the padding,so I figured an Overlay stack pulling it up would solve that. And it does, as per the home page…

https://demos.caffeineinjection.com/simplestore/

So unbelievably, this is all working as I’d hoped. Which is rare! But my question is, is there a better way to do this? I’m looking for a solution that I can roll out over all the client’s sites that use my Store script, so there are going to be a lot of variables. As such, I’m looking for the cleanest and simplest approach.

Any ideas? Or, does my solution above seem “OK” to you?

[TemplateRepo]

Ignore.

[tav]

Don’t pad the HTML stack, you just need to set its overflow to visible (it defaults to hidden)

Then make sure there is something else on the page. With just the menu on the page, the doc finishes immediately below the menu and so there is nothing for it to drop into.

(I should add that apart from being a vulgar and crude solution, padding a certain amount will fail if users have text size set to larger than normal in their browser settings and the lower menu items will be still cut off.)

[TemplateRepo]

Brill, thanks for that. I kinda had an idea that this wasn’t the best approach, didn’t occur to me it was simply an overflow hidden thing.

Cheers.

[TemplateRepo]

Hmmm, proving a bit harder than expected.

Back to the test page: test

I thought a simple bit of CSS would work, so added…

.overfix {
	overflow: visible !important;
}

But it didn’t. So added in a z-index, incase that was also an issue…

.overfix {
	z-index: 999 !important;
	overflow: visible !important;
}

But no.

In Inspector I can change this…

.stacks_out {
overflow: visible;
}

But I can’t apply that within RW.

I know I’m going wrong somewhere, but can’t figure out where. Any pointers?

Thanks.

[tav]

Just add this to your site wide CSS - if you use any of the RW framework solutions then they will do this for you

div.stacks_in, div.stacks_out {
    overflow:visible
}

Making the selector a bit more specific with the tag as well as the class avoids the need for an !important and makes you look less like a street whore :)

The alternative would just be to put your HTML stack inside a 1 col and give that a custom class. You could then address the .custom-class .stacks_out:first-childwhich would be the outer wrapper on your HTML stack.

[TemplateRepo]

Maybe I like that look?

;-)

Thanks.