Help and advice building a really great looking navigation bar for huge fantasy website

Report · Jan 07, 2017

Hi all, I wonder you can help I built a basic navigation system for my website Bootstrap - Prebuilt Layout which I have it on the frontpage. I would like to add this to all my pages but would like to know how to make it really professional looking first, here's the code, and ideas hints tricks greatly appreciated.

ps. will also be looking into breadcrumbs for all pages soon

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span></button>

<li class="active"><a href="Fine%20Art%20Gallery.htm">Art

Gallery</a><span class="sr-only">(current)</span></li>

<li class="active"><a href="Comics.htm">Books,

comics & Graphic novels</a><span class="sr-only">(current)</span></li>

<li><a href="Twenty%20Worlds.htm">Timeline</a></li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Core Rules </a>

<li><a href="THE%20BASICS.htm">The

Basics</a></li>

<li><a href="Combat.htm">Combat</a></li>

<li><a href="worlds%20atlantis%20skills.htm">Skills

Index </a></li>

<li><a href="Feats.htm">Feats

Index </a></li>

<li><a href="Epic%20Feats.htm">Epic

Feats Index</a></li>

<li><a href="worlds%20med%20Ship%20Combat.htm">Ship

Combat</a></li>

</ul>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Geography</a>

<li><a href="#"><a href="Geography.htm">Geography</a></a></li>

</ul>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Environments</a>

<li><a href="#"><a href="worlds%20med%20Settlements.htm">Settlements</a></a></li>

<li><a href="#"><a href="worlds%20med%20Crime%20and%20Punishment.htm">Crime

and Punishment</a></a></li>

<li><a href="#"><a href="worlds%20med%20Ink%20&%20Quill.htm">Ink

& Quill</a></a></li>

<li><a href="#"><a href="Secret%20Societies.htm">Secret

Societies</a></a></li>

<li><a href="#"><a href="Dungeons.htm">Dungeons</a></a></li>

<li><a href="#"><a href="Traps.htm">Traps</a></a></li>

<li><a href="#"><a href="Weather.htm">Weather Hazards</a></a></li>

<li><a href="#"><a href="Wilderness.htm">Wilderness</a></a></li>

<li><a href="#"><a href="worlds%20med%20Diseases.htm">Diseases</a></a></li>

<li><a href="#"><a href="Treasure.htm">Treasure</a></a></li>

</ul>

</li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Equipment</a>

<li><a href="Twenty%20Worlds%20Atlantis%20Weapons%20and%20Armour.htm">Weapons

and Equipment basics</a></li>

<li><a href="twenty%20worlds%20atlantis%20armour.htm">Armour </a></li>

<li><a href="Worlds%20Atlantis%20Equipment.htm">Equipment</a></li>

<li><a href="Twenty%20Worlds%20Atlantis%20Weapons.htm">Weapons</a></li>

<li><a href="Drugs.htm">Drugs</a></li>

<li><a href="worlds%20equipment%20Fire%20Arms.htm">Firearms</a></li>

<li><a href="Poisons.htm">Poisons</a></li>

<li><a href="twenty%20worlds%20Age%20of%20Discovery%20technology%20siege%20engines.htm">Siege

Engines</a></li>

<li><a href="worlds%20med%20Vehicles.htm">Vehicles</a></li>

<li><a href="worlds%20equipment%20Special%20Materials.htm">Special

Materials</a></li><li><a href="Masterwork.htm">Masterwork

Items </a></li>

</ul>

</li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Base Classes</a>

<li><a href="worlds%20atlantis%20classes%20barbarian.htm">Barbarian</a></li>

<li><a href="worlds%20atlantis%20classes%20cleric.htm">Cleric</a></li>

<li><a href="worlds%20atlantis%20classes%20druid.htm">Druid</a></li>

<li><a href="worlds%20atlantis%20classes%20fighter.htm">Fighter</a></li>

<li><a href="worlds%20atlantis%20classes%20paladin.htm">Paladin</a></li>

<li><a href="worlds%20atlantis%20classes%20ranger.htm">Ranger</a></li>

<li><a href="worlds%20atlantis%20classes%20rogue.htm">Rogue</a></li>

<li><a href="worlds%20atlantis%20classes%20sorcerer.htm">Sorcerer</a></li>

<li><a href="worlds%20med%20witch%20The%20Witch%20Class.htm">Witch</a></li>

<li><a href="worlds%20atlantis%20classes%20wizard.htm">Wizard</a></li><li><a href="Character%20Classes.htm"><font face="Georgia, Times New Roman, Times, serif" size="-1">Character

Classes </font></a></li><li><a href="worlds%20med%20PRESTIGE%20CLASSES.htm">Prestige

Classes</a></li>

</ul>

</li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Monsters</a>

<li><a href="twenty%20worlds%20Age%20of%20Discovery%20Empire%20bestiary.htm">Monsters</a></li>

<li><a href="Creature%20Types.htm">Creature

Types</a></li>

<li><a href="#"><a href="worlds%20med%20Haunts.htm">Haunts</a></a></li>

<li><a href="#"><a href="Special%20Abilities.htm">Special Abilities</a></a></li><li><a href="Races.htm">Races</a></li>

</ul>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Non player Characters (NPCs)</a>

<li><a href="#"><a href="worlds%20med%20Characters.htm">Stock (NPCs)

Characters</a></a></li>

<li><a href="#"><a href="Heros%20and%20Villains.htm">Heros

and Villains</a></a></li>

</ul>

</li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Magic</a>

<li><a href="spells.htm">Spells</a></li>

<li><a href="spells%20bard.htm">Bard

Spells</a></li>

<li><a href="spells%20cleric.htm">Cleric

Spells</a></li>

<li><a href="spells%20Cleric%20Domains.htm">Cleric

Domains</a></li>

<li><a href="spells%20druid.htm">Druid

Spells</a></li>

<li><a href="spells%20paladin.htm">Paladin

Spells</a></li>

<li><a href="spells%20ranger.htm">Ranger

Spells</a></li>

<li><a href="spells%20sorcerer%20wizard.htm">Sorcerer/Wizard

Spells</a></li>

</ul>

</li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Magic Items</a>

<li><a href="Magic%20items%20Basics%20and%20Creation.htm">Magic

items (Basics and Creation)</a></li>

<li><a href="Magic%20Item%20Descriptions.htm">Magic

Item Descriptions</a></li>

<li><a href="CREATING%20MAGIC%20ITEMS.htm">Creating

Magic Items</a></li>

<li><a href="Magic%20Items%20Armour.htm">Magic

Items (Armour and Sheilds)</a></li>

<li><a href="Magic%20Items%20potions%20and%20oils.htm">Magic

Items (Potions and Oils)</a></li>

<li><a href="Magic%20Items%20rings.htm">Magic

Items (Rings)</a></li>

<li><a href="Magic%20Items%20Rods.htm">Magic

Items (Rods)</a></li>

<li><a href="Magic%20Items%20Scrolls.htm">Magic

Items (Scrolls)</a></li>

<li><a href="Magic%20Items%20Staffs.htm">Magic

Items (staffs)</a></li>

<li><a href="Magic%20Items%20Wands.htm">Magic

Items (Wands)</a></li>

<li><a href="Magic%20Items%20Weapons.htm">Magic

Items (Weapons)</a></li>

<li><a href="Magic%20Items%20Wondrous%20Items.htm">Magic

Items (Wondrous Items)</a></li>

<li><a href="Magic Items Cursed Items.htm">Magic

Items (Cursed Items)</a></li>

<li><a href="Magic Items Artifacts.htm">Magic

Items (Artifacts)</a></li>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Civilizations</a>

<li><a href="twenty%20worlds%20Bathos.htm">Primordial World (Lemuria)</a></li>

<li><a href="twenty%20worlds%20atlantis%20nations%20arabia.htm">Fertile

Cresent</a></li>

<li><a href="Twenty%20worlds%20atlantis%20Nations%20The%20Kingdom%20of%20the%20sun.htm">Egyptian</a></li>

<li><a href="Twenty%20worlds%20Atlantis%20Nations%20The%20Republic.htm">Hellenic </a></li>

<li><a href="twenty%20worlds%20atlantis%20nations%20Praetorians.htm">Italian</a></li>

<li><a href="Twenty%20worlds%20atlantis%20Nations%20Tribes%20of%20Wode.htm">Celtic</a></li>

<li><a href="twenty%20worlds%20Atlantis%20nations%20Midgard.htm">Viking</a></li>

<li><a href="worlds%20atlantis%20Finland.htm">Lapland</a></li>

<li><a href="worlds%20atlantis%20Native%20American.htm">North

American</a></li>

<li><a href="worlds%20atlantis%20South%20American.htm">South

American </a></li>

<li><a href="worlds%20atlantis%20Oceania.htm">Oceania</a></li>

<li><a href="worlds%20atlantis%20African.htm">African</a></li>

<li><a href="worlds%20atlantis%20Chinese.htm">Oriental </a></li>

</ul>

</li>

<li><a href="Twenty%20worlds%20Atlantis%20Arabia%20Gods.htm">Babylonian

Pantheon</a></li>

<li><a href="Twenty%20Worlds%20atlantis%20patheonal%20kingdom%20of%20the%20sun.htm">Pharaonic

Pantheon</a></li>

<li><a href="twenty%20worlds%20Atlantis%20Patheonal%20the%20republic.htm">Olympian

Pantheon</a></li>

<li><a href="twenty%20worlds%20atlantis%20patheons%20tribes%20of%20wode.htm">Celtic

Pantheon</a></li>

<li><a href="twenty%20worlds%20atlantis%20Midgard%20Gods.htm">Asgardian

Pantheon</a></li>

<li><a href="worlds%20atlantis%20Finland%20Gods.htm">Finish

Pantheon</a></li>

<li><a href="other%20gods.htm">Other

Gods</a></li>

<li><a href="Salient%20Divine%20Abilities.htm">Salient

Divine Abilities</a></li>

</ul>

</li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Planes</a>

<li><a href="worlds%20med%20The%20Abyss.htm">The

Abyss</a></li>

<li><a href="worlds%20med%20Abaddon.htm">Abaddon</a></li>

<li><a href="worlds%20atlantis%20celt%20The%20Otherworld.htm">Otherworld

(Faire Realm)</a></li>

<li><a href="p%20Celestial%20Realms.htm">Celestial

Realm</a></li>

<li><a href="worlds%20med%20Ethereal%20Plane.htm">Ethereal

Plane</a></li>

</ul>

</li>

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Other</a>

<li><a href="twenty%20worlds%20age%20of%20discovery.htm">Medieval</a></li>

<li><a href="Twenty%20worlds%20Gaia.htm">Modern

Fantasy </a></li>

</ul>

</li>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Links</a>

<li><a href="#">Useful Websites</a></li>

<li><a href="http://www.dandwiki.com/wiki/Main_Page">D&D

Wiki</a></li>

<li><a href="http://pathfinderwiki.com/wiki/Pathfinder_Wiki">PathfinderWiki</a></li>

<li><a href="http://www.enworld.org/">EN

World</a></li>

<li><a href="http://www.dotd.com/mm/MM00000.htm">2E

Monster Manual (html with pics)</a></li>

<li><a href="http://www.lomion.de/cmm/_contents.php">Complete Monstrous Manual</a></li>

<li><a href="http://www.d20srd.org/">Hypertext

d20 SRD</a></li>

<li><a href="http://www.d20pfsrd.com/home">Pathfinder SRD</a></li>

<li><a href="http://paizo.com/pathfinderRPG/prd/">Pathfinder Roleplaying Game Reference Document</a></li>

<li><a href="#">Useful

Forums</a></li>

<li><a href="http://www.giantitp.com/forums/index.php">Giant

in the Playground Forum</a></li>

<li><a href="http://dicefreaks.freeforums.org/">Dice

freaks </a></li>

<li><a href="#">Action</a></li>

<li><a href="#">You

Tube Channels</a></li>

<li><a href="https://www.youtube.com/channel/UCF-i5kmuwyV6N3xi5z1TElg">theDMsCraft</a></li>

<li><a href="https://www.youtube.com/channel/UCCh5vto8JFstb9Sma9zV25g">Drunkens

& Dragons: Play D&D Like a Badass</a></li>

<li><a href="https://www.youtube.com/channel/UCk5AWX3ljxADaE3mO8q0iWA">Saving

Throw</a></li>

<li><a href="https://www.youtube.com/user/TheDMGinfofeatured">TheDMGinfo</a></li>

<li><a href="#"><a href="https://www.youtube.com/user/RedEyesTakeWarning">Overly Sarcastic Productions</a></a></li>

<li><a href="#">Facebook Groups</a></li>

<li><a href="https://www.facebook.com/groups/44641935828/">Hirst Arts Fantasy Architecture.</a></li>

<li><a href="#">Blogs</a></li>

<li><a href="http://thecreaturechronicle.tumblr.com/">THE CREATURE CHRONICLE</a></li>

<li><a href="http://d20pirates.blogspot.co.uk/">D20pirates.blogspot</a></li>

<li><a href="http://hyakumonogatari.com/">Hyakumonogatari

Kaidankai</a></li>

<li><a href="#">Art Sites</a></li>

<li><a href="http://darkclassics.blogspot.co.uk/">Darkclassics</a></li>

<li><a href="http://www.deviantart.com/">Deviantart</a></li>

<li><a href="http:/monsterbrains.blogspot.co.uk/">Monster

Brains</a></li>

<li><a href="http://scrap.oldbookillustrations.com/page/3">OBI Scrapbook Blog</a></li>

<li><a href="#">Accessories</a></li>

<li><a href="http://www.profantasy.com/">Pro

Fantasy (Mapping Software</a></li>

<li><a href="http://www.penpaperpixel.org/tools/d20dicebag.htm">d20

Dice Bag</a></li>

<li><a href="http://www.dinglesgames.com/toolsmonsterGenerator/dnd35/">Dingles

games NPC Generator</a></li>

<li><a href="http://games.groups.yahoo.com/group/dungeon_tiles/">dungeon_tiles

· D&D Dungeon Tile Maps (WotC)</a></li>

<li><a href="http://masterplan.habitualindolence.net/">Masterplan</a></li>

<li><a href="http://www.monsteradvancer.com/">Monster

Advancer</a></li>

<li><a href="http://www.myth-weavers.com/forumhome.php">Myth-Weavers</a></li>

<li><a href="http://pcgen.sourceforge.net/03_get_pcgen.php#stable">PCGen An open source RPG character generator</a></li>

<li><a href="http://dxcontent.com/">dxContent.com</a></li>

<li><a href="http://guilesworld.com/">Guilesworld </a></li>

<li><a href="http://www.wizards.com/default.asp?x=d20/article/srd35">SRD:System

Reference Document</a></li>

<li><a href="#">Miniatures

Producers</a></li>

<li><a href="http://www.copplestonecastings.co.uk/">Copplestone

Castings</a></li>

<li><a href="http://www.outpostwargameservices.co.uk/">Outpost

Wargames scenery</a></li>

<li><a href="http://www.reapermini.com/">Reaper

Miniatures</a></li>

<li><a href="http://www.thunderboltmountain.com/">Thunderbolt

Mountain </a></li>

<li><a href="#">Painted

Miniatures</a></li>

<li><a href="Figure%20Painting%20Service.htm">Please

click here to see the miniatures and Models gallery</a></li>

<li><a href="#">Just Wrong!</a></li>

<li><a href="#"><a href="https://www.youtube.com/show/dungeonbastard">Dungeon Bastard</a></a></li>

</ul></li>

<a href="#">Music</a>

<li><a href="https://www.youtube.com/playlist?list=PLvB4EDOkQGIvzT8MSngzUQyOfTvKLQmPQ">Deities

by the Chamber band</a></li>

</ul>

</div>

</div>

</nav>

Report · Jan 07, 2017

The prevailing trend in menus is ultra minimalist. Nothing fancy, flashy or complicated. A very basic construction with just a 3 bar icon that people click or tap. Links may appear below the icon or slide in from the left or right side -- also known as Off Canvas Menus.

Minimalist Example from the Sak

Hand-crocheted and casual leather bags, shoes, accessories | The Sak Official Store

Off Canvas Plugin

JavaScript · Jasny Bootstrap

On the opposite end of the spectrum is the Mega Menu. Once very popular but not so much anymore because they are too unruly for mobile devices.

https://designm.ag/inspiration/mega-menus/

In conclusion, if you want a modern, professional looking web site, go with the ultra minimalist approach. Keep it simple.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 07, 2017

the first thing I would fix is the image slideshow so that all images fit inside the same shape... having them pop up and down draws the eye away from the actual images and looks unprofessional imo

Help and advice building a really great looking navigation bar for huge fantasy website

1 Correct answer