Suggestion and ideas needed

[Simon_4]

I like this menu and how it's done:

http://www.peterstone.com/

Does somebody has any idea and suggestion, how the easiest way is, to realize this kind of main nav they have?

Cheeers Simon

[DaveAmour]

That's a bootstrap menu.

http://www.w3schools.com/bootstrap/bootstrap_case_navigation.asp

[Simon_4]

Hi DaveAmour

Maybe I have a missunderstanding or so. I speak about the navigation, when I click on "Categories" on this website: www.peterstone.com . See attachment.

The link You sent me, not looks the same, or I am blind at the moment?

[AleMonteiro]

Hi Simon, I can't suggest you one specific cause I've never used one similar to what you want.
But I can say there's hundreds of jQuery Menu plugins that can be customized to do as you wish.

One of the most basics, that you would need to play with CSS to get the desired result is jQuery UI Menu. It's simple but quite powerful if you know you're way arround CSS and jQuery.

If you want something more "ready" to use, take a look at some compilations of jQuery menu plugins (there's lots out there):
http://www.webmaster.pt/76-menu-jquery-14624.html
http://www.freshdesignweb.com/css-drop-down-navigation-menu.html
http://www.jqueryrain.com/example/jquery-menu-example/

I'm certain that the one you're looking for already exists.
Then, after you tried some, we can help you customize it if you need =)

Just be aware that although this site (and menu) seem to be "responsive", I can only imagine the smartphone view to be a nightmare. Shrink your web browser down to the size of a smartphone screen and you'll see what I mean. Just be aware of how many options you really need in your megamenus. I used to think of mobile visitors to one of my sites as edge-case nutters, until I looked at the analytics - they now "out-visit" traditional pcs by 4:1. Shocked? I tripped over my jaw.

[BengtHall]

Smartphone wiew actually works ok but the site is slow loading.
Use Joomla or Wordpress and buy a template:

http://yootheme.com/
https://www.joomlart.com/joomla/templates
http://www.rockettheme.com/joomla/templates

You can find loads more if you search

Why buy into joomla or wp? I don.t get it.

[BengtHall]

With Joomla you do the design for laptop and get tablet/smartphone interface automaticly.

What you'd install a monster like WP or Joomla just to get responsive? I think that's a bit extreme. As this is a learning forum more than anything else, perhaps we should be discussing the various issues involved with DIY responsive techniques. I'm not "dissing" these CMSes / Blogging platforms, but they are for specific purposes (or should be), and while very very useful for the purposes they target, they are not a general "go to" panacea.

[Simon_4]

Thank You for those suggestions.

I need to clear something:

I not use on this page http://www.spiritfilledjewelry.com/ wp or joomla or so. It is a shop system called Volusion.

And we clean up the categories as we have the actual navigation now.

What I need to know now, instead of having "all" subcategories in one list, I like to have "similar to a table" like

cat 1 cat 11 cat 21
cat 2 cat 12 ..
cat 3 cat 13 ..
.. .. ..
cat 10 cat 20 cat n

I know it should be something easy with float on the right place... but where and how?

Sorry I didn't get whether http://www.spiritfilledjewelry.com/ is the site or not. If it is, then an issue with it is that the menu dropdown menu extends further than the fold without any way to navigate to the last items e.g. with a scroll bar.

I'm still a bit lost as to the actual layout you require. Could you provide a screenshot of a simple image of what you're looking for?

If it's a complicated menu, then perhaps an off-the-shelf solution would be easier. Some are free, some you pay a one-off small fee, e.g.

http://codecanyon.net/search?utf8=%E2%9C%93&term=megamenu+responsive

I do not like to "cry off" with a third party script suggestion, but we need a little more info.

[Simon_4]

I figured out how I can do, here is the result:
http://www.spiritfilledjewelry.com

Now I only like to have the "sub menu" in the center of the page. How I can do it exactly? Here some code:

<!-- NAVIGATION -->
                    <!-- Collect the nav links, forms, and other content for toggling -->
                      <!--<div class="swiftnav navbar-collapse collapse">-->
                     <div class="collapse navbar-collapse" id="main-nav">
                        <div id="display_menu_1" class="menu"><ul class='vnav vnav--horizontal vnav--level1'>
<li class='vnav__item'><a href='https://www.spiritfilledjewelry.com/Default.asp' class='vnav__link'>Home</a>
</li>
<li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/106.htm' class='vnav__link'>Jewelry Themes</a>
<ul class='vnav vnav__subnav vnav--level2'>
<li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/109.htm' class='vnav__link'>Angel</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/116.htm' class='vnav__link'>Animals & Nature</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/117.htm' class='vnav__link'>Antique</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/118.htm' class='vnav__link'>Aromatherapy</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/119.htm' class='vnav__link'>Astrology</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/120.htm' class='vnav__link'>Atlantis</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/110.htm' class='vnav__link'>Beach & Dive</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/121.htm' class='vnav__link'>Bead</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/122.htm' class='vnav__link'>Bell</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/123.htm' class='vnav__link'>Bold Filigree</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/124.htm' class='vnav__link'>Boxed Gift Set</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/125.htm' class='vnav__link'>Calla Lily</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/126.htm' class='vnav__link'>Celtic Translation</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/127.htm' class='vnav__link'>Chains</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/128.htm' class='vnav__link'>Cimaruta</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/129.htm' class='vnav__link'>Coffee</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/130.htm' class='vnav__link'>Contemporary</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/131.htm' class='vnav__link'>Crown</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/132.htm' class='vnav__link'>Designer</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/133.htm' class='vnav__link'>Empowering Word</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/134.htm' class='vnav__link'>Equestrian</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/135.htm' class='vnav__link'>Fairies & Fantasy</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/136.htm' class='vnav__link'>Feng Shui</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/137.htm' class='vnav__link'>Filigree</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/138.htm' class='vnav__link'>Fox Chasers Club</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/139.htm' class='vnav__link'>Geometry</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/140.htm' class='vnav__link'>Gold Accent</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/141.htm' class='vnav__link'>Good Luck Coin</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/142.htm' class='vnav__link'>Healing</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/143.htm' class='vnav__link'>Infinity</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/144.htm' class='vnav__link'>Leather Cord Collection</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/145.htm' class='vnav__link'>Love</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/146.htm' class='vnav__link'>Medieval & Viking</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/147.htm' class='vnav__link'>Men's Jewelry</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/148.htm' class='vnav__link'>Modern Celtic</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/149.htm' class='vnav__link'>Musical</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/150.htm' class='vnav__link'>Organic</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/151.htm' class='vnav__link'>Pagan & Wicca</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/152.htm' class='vnav__link'>Patriotic</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/153.htm' class='vnav__link'>Peace</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/154.htm' class='vnav__link'>Performance  Amulets</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/155.htm' class='vnav__link'>Pets</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/156.htm' class='vnav__link'>Pirates</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/157.htm' class='vnav__link'>Rainbow</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/158.htm' class='vnav__link'>Safari</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/159.htm' class='vnav__link'>Sea Life and Nautical</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/160.htm' class='vnav__link'>Seal of Solomon</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/161.htm' class='vnav__link'>Special Halloween Collections</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/162.htm' class='vnav__link'>Spirituality</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/163.htm' class='vnav__link'>Spoon Ring</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/164.htm' class='vnav__link'>Steampunk</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/165.htm' class='vnav__link'>Sun, Moon and Stars</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/166.htm' class='vnav__link'>Swan Claddagh</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/167.htm' class='vnav__link'>Three Tone</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/168.htm' class='vnav__link'>Vedic Astrology</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/169.htm' class='vnav__link'>Wedding Bands</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/170.htm' class='vnav__link'>Yoga</a>
</li></ul>
</li>
<li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/171.htm' class='vnav__link'>Magick</a>
<ul class='vnav vnav__subnav vnav--level2'>
<li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/192.htm' class='vnav__link'>Bats</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/179.htm' class='vnav__link'>Blue Moon</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/176.htm' class='vnav__link'>Broomstick</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/185.htm' class='vnav__link'>Cats</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/183.htm' class='vnav__link'>Druid Amulet</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/186.htm' class='vnav__link'>Eye of Horus</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/190.htm' class='vnav__link'>Four Elements</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/175.htm' class='vnav__link'>Goddess</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/177.htm' class='vnav__link'>Green Man</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/180.htm' class='vnav__link'>Moon</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/182.htm' class='vnav__link'>Oak Leaf</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/184.htm' class='vnav__link'>Owl</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/191.htm' class='vnav__link'>Pan</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/173.htm' class='vnav__link'>Pentagram Pentacle</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/187.htm' class='vnav__link'>Phoenix</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/178.htm' class='vnav__link'>Raven</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/188.htm' class='vnav__link'>Skulls</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/172.htm' class='vnav__link'>The Earth Magick</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/174.htm' class='vnav__link'>Tree of Life</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/181.htm' class='vnav__link'>Triquetra</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/193.htm' class='vnav__link'>VEVE</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/194.htm' class='vnav__link'>Witch</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/189.htm' class='vnav__link'>Wizard</a>
</li></ul>
</li>
<li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/195.htm' class='vnav__link'>Celebrated Artists</a>
<ul class='vnav vnav__subnav vnav--level2'>
<li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/206.htm' class='vnav__link'>Animal</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/201.htm' class='vnav__link'>Astrology & Zodiac</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/199.htm' class='vnav__link'>Celtic Translation Artists</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/203.htm' class='vnav__link'>Fantasy Fest Gallery Artists</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/198.htm' class='vnav__link'>Gothic and Goth Artists</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/205.htm' class='vnav__link'>Horses</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/207.htm' class='vnav__link'>Intuitive</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/204.htm' class='vnav__link'>Mixed Media</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/202.htm' class='vnav__link'>Native American Inspired Artists</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/197.htm' class='vnav__link'>Pagan, Wicca & Witch</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/196.htm' class='vnav__link'>Pirate</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/200.htm' class='vnav__link'>Sacred Geometry</a>
</li><li class='vnav__item'><a href='http://www.SpiritFilledJewelry.com/category-s/208.htm' class='vnav__link'>Spirituality</a>
</li></ul>
</li>
</ul>
</div>
                    </div><!-- /.navbar-collapse -->
                </div> <!-- /.navbar -->

[gentlemedia]

I did the following with the browsers' developer tools and got the submenu centered.

Delete in your CSS position: relative on #main-nav .vnav__item and on .vnav__item.
The other thing to do is to change in the CSS on #main-nav .vnav--horizontal .vnav__subnav the property left: 370px to left: 0.

If you add width: 100% to #main-nav .vnav and delete the left & right padding of 15px on .navbar-collapse, then the submenu expands to the full width of the layout.

On a side note... why are you editing and changing stuff on a site that is live? Better to make a copy of the site and tweak stuff in there.

[Simon_4]

I will try to do it tomorrow.
For Your question, it is a shopsystem called Volusion.
Is not easy to get everything locally to test and edit.
And, we are still in the design phase, so not really online with products and live.
But the system is much better than Amazons Webstore. There I customized also already a webpage...

[Simon_4]

Hi gentlemedia

I tried some parts, as I am not able to edit every files. I tried some more things, but still not get the subnavigation centered.

What about this "element" '#main-nav .vnav--horizontal .vnav__subnav' .

This I like to have center...

[gentlemedia]

If you can't edit some files then override the properties in a file which you can edit, but the properties that needed to change are in vnav.css and navigation.css.

I see now also that there gets a margin-left: -201px; added dynamically on vnav vnav__subnav vnav--level2. This is weird, because I didn't had this yesterday and I don't know why it's added, but it's pushing the submenu unnecessary to the left.
You might want to override that in your stylesheet with margin-left: auto !important;

[Simon_4]

I did, the subnavigation goes to te left... I like to have it center, with this width I have...

[gentlemedia]

Ok, then remove those margin-left's that you've added dynamically and use something like this

#main-nav .vnav--horizontal .vnav__subnav {
  left: 50%;
  top: 100%;
  width: 740px;
  margin-left: -370px;
}

[Simon_4]

Hi gentlemedia

I still not get it center to the page.

Any other ideas?

Kindly Simon

[gentlemedia]

You didn't change it to what I've posted. You have now this:

#main-nav .vnav--horizontal .vnav__subnav {
  left: -360px;
  top: 100%;
  width: 750px;
}

Which should be this:

#main-nav .vnav--horizontal .vnav__subnav {
  left: 50%;
  top: 100%;
  width: 750px;
  margin-left: -375px;
}

[Simon_4]

Hi changed it now. But it is still not centered / in the mid of the page.

It is centered from the upper navigation. I would like to have it centered from the page...

[gentlemedia]

For this you'll have to delete the position: relative on .vnav__item in the vnav.css file, which I explained already in another post of mine.

By the way, There are styles applied to that nav which are coming from to 2 different stylesheets (vnav.css and navigation.css). Is this because you use one stylesheet to override styles in the other stylesheet, because you don't have access to that one?

[Simon_4]

If I can take it out in vnav.css, it would work. But it is given from the system.

[gentlemedia]

So you can't edit vnav.css, but you can edit navigation.css?

[Simon_4]

Yes exactly. What I was thinking... if I put a javascript before the navigation... takes the behavior away...

[gentlemedia]

Yes exactly.

Ok, I see! In navigation.css you have commented out position: relative on #main-nav .vnav__item, but since there is also a position: relative on .vnav__item in vnav.css (which you can't edit), you will need to do this instead in navigation.css.

#main-nav .vnav__item {
    position: static
}

This selector chain has a stronger specificity then the one in vnav.css (vnav.css gets injected later in the source, then navigation.css), so it should be enough to override it.

What I was thinking... if I put a javascript before the navigation... takes the behavior away

I don't know what you mean with this!

[Simon_4]

ok, what I did now

#main-nav .vnav__item {
    position: static !important;
}

And it works, as I like to have it.

[Simon_4]

Thank You for Your help

[gentlemedia]

Ohkay... so you did need the !important rule. Oh well, I'm glad we've sorted this one out!

Don't forget to mark this thread as solved!

[Sumit_5]

Hello,

I think you can check this for help
http://weblees.com/css3-mega-menu-examples/

Thanks