Some HORIZONTAL MENU Questions.... -...

User 1980560 Photo


Registered User
38 posts

I'm using a custom theme I built with SCDP which has the standard horizontal text menu at the top of the page directly under the Shop Name. I want to add some links to my menu that link to external pages - pages not created with SCC. First, is this possible? And second, is it possible to extend the width of the horizontal menu? It seems that when I add more pages through SCC, the menu wraps around and puts the new links under the existing links. When I look at the menu in SC Designer Pro, it looks like the horizontal menu is only so wide (approx. half the width of the page), and once you extend beyond that width, it automatically puts a link break in the menu and wraps the links underneath the other links. There is no obvious way to extend the width of the menu to, say 400px wide.

OR...If I created an image map using Coffee Cups Image Mapper as my page header image that contained all the links I wanted to include, is there a way to HIDE the default horizontal text menu? That would solve my problem as well. To compensate, I would leave the menu in the Footer of the page.

Can either of these be done?

Anyone? Anyone? Bueller? Anyone?
User 187934 Photo


Senior Advisor
20,181 posts

There's some overrides that can be accomplished. In my test shop the CUSTOM PAGE link is being position on the main menu with code. It's not part of the shops built in navigation system.:)
http://progrower.coffeecup.com/shop/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 1980560 Photo


Registered User
38 posts

Thanks Rolly!

Now...am I able to link that to an external page...one that is NOT built or added within SCCP? If so, I'm rockin'!

I'll play around with it and see what I can do.
User 187934 Photo


Senior Advisor
20,181 posts

That's the best thing to do. Experiment with all the possibilities. Make sure you preview in at least IE and FX as I have found some code to work very different in each of these browsers.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 1980560 Photo


Registered User
38 posts

Yo Rolly! I got an extra link added per your instructions by adding some code to the footer custom markup. Here's my dilemma now: What if I want to add TWO pages? Or THREE? I've been playing around with this for the last three hours and I'm bug eyed. I know I'm going to have to adjust the position of each link...but what code do I insert to add more than just one additional link?

My shop is here:
http://obama2012tshirtshop.com/shop/


You can see I added a "Contact Us" link in the top Nav Menu. Now I want to add a couple more links next to that one. How would I do this? I'm sure it's something very simple...I'm just not seeing it.

Thanks in advance!!!
User 1980560 Photo


Registered User
38 posts

Hold the bus Rolly! I figured it out myself. I just add "2" to the code you posted. Like so:

<style type="text/css"> div#custompagelink{width:100px;height:13px;left:590px;top:200px;position:absolute;
z-index:1000;font-size: 13px;} </style>
<div id="custompagelink"><a href="http://www.obama2012tshirtshop.com/contact.html">Contact Us</a>
</div>

<style type="text/css"> div#custompagelink2{width:100px;height:13px;left:670px;top:200px;position:absolute;
z-index:1000;font-size: 13px;} </style>
<div id="custompagelink2"><a href="http://www.obama2012tshirtshop.com/contact.html">Mailing List</a>
</div>

For a third link, just add "3". Works like a charm! Now just gotta tweak the horizontal placement and Viola! Success!
User 187934 Photo


Senior Advisor
20,181 posts

Yup that's one way to do it. It's it fun to figure this stuff out.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 38401 Photo


Senior Advisor
10,951 posts

Just in case you're not seeing what I'm seeing in Firefox 10.1 and IE9 your added links are overlapping the other links on the menu and unreadable for the most part.
User 1980560 Photo


Registered User
38 posts

Jo Ann: I unfortunately discovered that this morning when I viewed the site at work on a puter with a different screen resolution. I don't think it's browser related - but resolution related.

I'm using Firefox 10.1 also and it looks just fine at a resolution of 1440 x 900. But the resolution at work is different, so the links I added are far to the right...way past the default menu and almost over the edge of the shop window. I think this is because the links are positioned XXpx from the left edge of the screen - so they are going to be positioned differently at different resolutions.

Oh well. I tried. Unless somebody has a way to position the extra links XXpx from the edge of the store window and relative to the default menu, I don't think this is gonna work.

Thanks for the input though; it is much appreciated.

On a final note, it shouldn't be this friggin' difficult to add your own links to the Nav Bar that link to external pages. I shouldn't have to add a page within SCCP to get a link added to the Bar. I must say I've used both Zen Cart and CubeCart and this wouldn't be an issue with either of them. While SCCP does have some advantages, it's also a royal pain in the ass as well, in that you've got NO templates that you can edit. Just my 2-cents.
User 187934 Photo


Senior Advisor
20,181 posts

Try relative positioning.:)
<style type="text/css"> div#custompagelink{width:100px;height:13px;left:590px;top:200px;position:relative;
z-index:1000;font-size: 13px;} </style>
<div id="custompagelink"><a href="http://www.obama2012tshirtshop.com/contact.html">Contact Us</a>
</div>

The top and left will need to be adjusted.;)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.