Skip to content

Instantly share code, notes, and snippets.

@jordanlewiz
Last active December 19, 2015 05:49
Show Gist options
  • Save jordanlewiz/5906709 to your computer and use it in GitHub Desktop.
Save jordanlewiz/5906709 to your computer and use it in GitHub Desktop.
Envato's Marketplaces updated header HTML (example from Themeforest)
<header class="site-header">
<div class="site-header__primary">
<div class="header-primary">
<div class="container">
<div class="header-primary__container">
<div class="header-primary__brand">
<div class="site-switcher">
<a href="/" class="site-switcher__active-site"><span class="is-visually-hidden">ThemeForest</span></a>
<a href="#" class="site-switcher__toggle js-site-switcher-toggle">Switch Marketplace</a>
<nav class="site-switcher__panel is-hidden">
<a href="http://activeden.dev/" class="site-switcher-link"><span class="site-switcher-link__logo--activeden">ActiveDen</span>Flash and Unity 3D</a>
<a href="http://audiojungle.dev/" class="site-switcher-link"><span class="site-switcher-link__logo--audiojungle">AudioJungle</span>Stock Music and Audio </a>
<a href="http://themeforest.dev/" class="site-switcher-link"><span class="site-switcher-link__logo--themeforest">ThemeForest</span>Website Templates </a>
<a href="http://videohive.dev/" class="site-switcher-link"><span class="site-switcher-link__logo--videohive">VideoHive</span>Motion Graphics </a>
<a href="http://graphicriver.dev/" class="site-switcher-link"><span class="site-switcher-link__logo--graphicriver">GraphicRiver</span>Graphics, Vectors and Print </a>
<a href="http://3docean.dev/" class="site-switcher-link"><span class="site-switcher-link__logo--three_d_ocean">3DOcean</span>3D Models and Materials </a>
<a href="http://codecanyon.dev/" class="site-switcher-link"><span class="site-switcher-link__logo--codecanyon">CodeCanyon</span>Code, Plugins and Mobile </a>
<a href="http://photodune.dev/" class="site-switcher-link"><span class="site-switcher-link__logo--photodune">PhotoDune</span>Stock Photography</a>
</nav>
</div>
</div>
<div class="header-primary__right">
<div class="header-primary__community-links">
<ul class="navigation-list">
<li class="navigation-list__item--community-links">
<a href="/make_money/become_an_author">Make Money</a>
<div class="navigation-list__dropdown">
<ul class="dropdown">
<li><a href="/make_money/become_an_author">Become an Author</a></li>
<li><a href="/make_money/payment_rates">Payment Rates</a></li>
</ul>
</div>
</li>
<li class="navigation-list__item--community-links">
<a href="/forums">Forums</a>
<div class="navigation-list__dropdown">
<ul class="dropdown">
<li><a href="/forums/topic/themeforest/25">ThemeForest</a></li>
<li><a href="/forums/topic/item-discussion/26">Item Discussion</a></li>
<li><a href="/forums/topic/site-feedback/30">Site Feedback</a></li>
<li><a href="/forums/topic/tf-off-topic/31">TF Off Topic</a></li>
<li><a href="/forums/topic/item-requests/51">Item Requests</a></li>
<li><a href="/forums/topic/all-marketplaces/47">All Marketplaces</a></li>
<li><a href="/forums/topic/notices/49">Notices</a></li>
<li><a href="/forums/topic/global-off-topic/84">Global Off Topic</a></li>
<li><a href="/community/forum_rules">Forum Rules</a></li>
</ul>
</div>
</li>
<li class="navigation-list__item--community-links">
<a href="/page/file_updates">Community</a>
<div class="navigation-list__dropdown">
<ul class="dropdown">
<li><a href="'/page/file_updates" rel="nofollow">Social Media / RSS Feeds</a></li>
<li><a href="/community/marketplaces">The Envato Marketplaces</a></li>
<li><a href="/community/badges">Community Badges</a></li>
<li><a href="http://notes.envato.com/">Envato Notes</a></li>
<li><a href="/collections">Public Collections</a></li>
<li><a href="/feature">Featured Files</a></li>
<li><a href="/page/top_sellers">Popular Files</a></li>
<li><a href="/author/top_authors">Top Authors</a></li>
<li><a href="/page/top_new_sellers">Top New Authors</a></li>
</ul>
</div>
</li>
<li class="navigation-list__item--community-links">
<a href="/make_money/affiliate_program">Affiliates</a>
<div class="navigation-list__dropdown">
<ul class="dropdown">
<li><a href="/make_money/affiliate_program">Affiliate Program</a></li>
<li><a href="/make_money/banners_and_logos">Banners &amp; Logos</a></li>
</ul>
</div>
</li>
<li class="navigation-list__item--community-links">
<a href="/support">Help</a>
<div class="navigation-list__dropdown">
<ul class="dropdown">
<li><a href="/help/getting_started">Getting Started</a></li>
<li><a href="/support">Support Center</a></li>
<li><a href="/licenses">Licenses</a></li>
<li><a href="/legal/user/">Legal Agreements</a></li>
<li><a href="/help/api">API</a></li>
<li><a href="/category">Sitemap</a></li>
</ul>
</div>
</li>
<li class="navigation-list__item--community-links">
</li>
</ul>
</div>
<div class="header-primary__user-nav">
<nav class="user-nav">
<div class="user-nav__item">
<a href="/author_dashboard">
<span id="user_username">username</span>
<strong class="user-nav__balance">$99</strong>
</a>
<div class="user-nav__dropdown-container">
<div class="user-nav-dropdown">
<ul class="user-nav-dropdown-list">
<li><a href="/user/VF" class="user-nav-dropdown__item--profile">Profile</a></li>
<li><a href="http://account.envato.dev" class="user-nav-dropdown__item--envato">Envato Account</a></li>
<li><a href="/user/VF/edit" class="user-nav-dropdown__item--settings">Settings</a></li>
<li><a href="/downloads" class="user-nav-dropdown__item--downloads">Downloads</a></li>
<li><a href="/user/VF/bookmarks" class="user-nav-dropdown__item--bookmarks">Bookmarks</a></li>
<li><a href="/deposit" class="user-nav-dropdown__item--deposit">Make a Deposit</a></li>
</ul>
<ul class="user-nav-dropdown-list">
<li><a href="/author_dashboard" class="user-nav-dropdown__item--author-dashboard">Author Dashboard</a></li>
<li><a href="/upload" class="user-nav-dropdown__item--upload">Upload</a></li>
<li><a href="/user/VF/earnings" class="user-nav-dropdown__item--earnings">Earnings</a></li>
<li><a href="/statement" class="user-nav-dropdown__item--statement">Statement</a></li>
<li><a href="/accounts/withdrawal?username=VF" class="user-nav-dropdown__item--withdrawal">Withdrawal</a></li>
</ul>
</div>
</div>
</div>
<div class="user-nav__item">
<a href="http://account.envato.dev/sign_out?to=themeforest" data-method="post" data-remote="true" id="sign-out-button" rel="nofollow">Sign Out</a>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-header__secondary">
<div class="header-secondary">
<div class="container">
<nav class="header-secondary__categories" role="navigation">
<ul class="navigation-list">
<li class="navigation-list__item">
<a href="/category/all">All files</a>
<div class="navigation-list__dropdown">
<ul class="dropdown">
<li><a href="/page/top_sellers">Popular Files</a></li>
<li><a href="/author/top_authors">Top Authors</a></li>
<li><a href="/page/top_new_sellers">Top New Authors</a></li>
<li><a href="/category">View All Categories</a></li>
</ul>
</div>
</li>
<li class="navigation-list__item">
<a href="/category/wordpress">WordPress</a>
<div class="navigation-list__dropdown">
<ul class="dropdown">
<li class="dropdown__divider"><a href="/popular_item/by_category?category=wordpress">Popular Items</a></li>
<li><a href="/category/wordpress/blog-magazine">Blog / Magazine</a></li>
<li><a href="/category/wordpress/creative">Creative</a></li>
<li><a href="/category/wordpress/corporate">Corporate</a></li>
<li><a href="/category/wordpress/retail">Retail</a></li>
<li><a href="/category/wordpress/technology">Technology</a></li>
<li><a href="/category/wordpress/nonprofit">Nonprofit</a></li>
<li><a href="/category/wordpress/entertainment">Entertainment</a></li>
<li><a href="/category/wordpress/miscellaneous">Miscellaneous</a></li>
<li><a href="/category/wordpress/mobile">Mobile</a></li>
<li><a href="/category/wordpress/frameworks">Frameworks</a></li>
<li><a href="/category/wordpress/buddypress">BuddyPress</a></li>
<li><a href="/category/wordpress/ecommerce">eCommerce</a></li>
<li class="dropdown__divider--top"><a href="http://codecanyon.net/category/wordpress" class="navigation-list__external-link--in-dropdown" title="WordPress Plugins on CodeCanyon">WordPress Plugins <span class="is-visually-hidden">on CodeCanyon</span></a></li>
</ul>
</div>
</li>
<li class="navigation-list__item">
<a href="/category/site-templates">Site Templates</a>
<div class="navigation-list__dropdown">
<ul class="dropdown">
<li class="dropdown__divider"><a href="/popular_item/by_category?category=site-templates">Popular Items</a></li>
<li><a href="/category/site-templates/creative">Creative</a></li>
<li><a href="/category/site-templates/corporate">Corporate</a></li>
<li><a href="/category/site-templates/retail">Retail</a></li>
<li><a href="/category/site-templates/technology">Technology</a></li>
<li><a href="/category/site-templates/nonprofit">Nonprofit</a></li>
<li><a href="/category/site-templates/entertainment">Entertainment</a></li>
<li><a href="/category/site-templates/personal">Personal</a></li>
<li><a href="/category/site-templates/specialty-pages">Specialty Pages</a></li>
<li><a href="/category/site-templates/admin-templates">Admin Templates</a></li>
<li><a href="/category/site-templates/miscellaneous">Miscellaneous</a></li>
<li><a href="/category/site-templates/mobile">Mobile</a></li>
</ul>
</div>
</li>
<li class="navigation-list__item">
<a href="/category/marketing">Marketing</a>
<div class="navigation-list__dropdown">
<ul class="dropdown">
<li class="dropdown__divider"><a href="/popular_item/by_category?category=marketing">Popular Items</a></li>
<li><a href="/category/marketing/email-templates">Email Templates</a></li>
<li><a href="/category/marketing/landing-pages">Landing Pages</a></li>
</ul>
</div>
</li>
<li class="navigation-list__item">
<a href="/category/cms-themes">CMS</a>
<div class="navigation-list__dropdown">
<ul class="dropdown">
<li class="dropdown__divider"><a href="/popular_item/by_category?category=cms-themes">Popular Items</a></li>
<li><a href="/category/cms-themes/joomla">Joomla</a></li>
<li><a href="/category/cms-themes/drupal">Drupal</a></li>
<li><a href="/category/cms-themes/concrete5">Concrete5</a></li>
<li><a href="/category/cms-themes/expressionengine">ExpressionEngine</a></li>
<li><a href="/category/cms-themes/miscellaneous">Miscellaneous</a></li>
<li><a href="/category/cms-themes/custom">Custom</a></li>
</ul>
</div>
</li>
<li class="navigation-list__item">
<a href="/category/ecommerce">eCommerce</a>
<div class="navigation-list__dropdown">
<ul class="dropdown">
<li class="dropdown__divider"><a href="/popular_item/by_category?category=ecommerce">Popular Items</a></li>
<li><a href="/category/ecommerce/magento">Magento</a></li>
<li><a href="/category/ecommerce/shopify">Shopify</a></li>
<li><a href="/category/ecommerce/opencart">OpenCart</a></li>
<li><a href="/category/ecommerce/oscommerce">osCommerce</a></li>
<li><a href="/category/ecommerce/prestashop">PrestaShop</a></li>
<li><a href="/category/ecommerce/zen-cart">Zen Cart</a></li>
<li><a href="/category/ecommerce/miscellaneous">Miscellaneous</a></li>
<li><a href="/search?utf8=%E2%9C%93&amp;amp;term=virtuemart">VirtueMart</a></li>
<li><a href="/category/wordpress/ecommerce/wp-e-commerce">WP e-Commerce</a></li>
<li><a href="/category/wordpress/ecommerce/woocommerce">WooCommerce</a></li>
<li><a href="/category/wordpress/ecommerce/jigoshop">Jigoshop</a></li>
<li><a href="/category/wordpress/ecommerce/cart66">Cart66</a></li>
<li><a href="/browse/attributes/compatible_with/ubercart">Ubercart</a></li>
<li><a href="/browse/attributes/compatible_with/drupal_commerce">Drupal Commerce</a></li>
</ul>
</div>
</li>
<li class="navigation-list__item">
<a href="/category/psd-templates">PSD Templates</a>
<div class="navigation-list__dropdown">
<ul class="dropdown">
<li class="dropdown__divider"><a href="/popular_item/by_category?category=psd-templates">Popular Items</a></li>
<li><a href="/category/psd-templates/creative">Creative</a></li>
<li><a href="/category/psd-templates/corporate">Corporate</a></li>
<li><a href="/category/psd-templates/retail">Retail</a></li>
<li><a href="/category/psd-templates/technology">Technology</a></li>
<li><a href="/category/psd-templates/nonprofit">Nonprofit</a></li>
<li><a href="/category/psd-templates/entertainment">Entertainment</a></li>
<li><a href="/category/psd-templates/personal">Personal</a></li>
<li><a href="/category/psd-templates/miscellaneous">Miscellaneous</a></li>
</ul>
</div>
</li>
<li class="navigation-list__item">
<a href="/category/blogging/tumblr">Tumblr</a>
<div class="navigation-list__dropdown">
<ul class="dropdown">
<li><a href="/category/blogging/tumblr/blog">Blog</a></li>
<li><a href="/category/blogging/tumblr/portfolio">Portfolio</a></li>
<li><a href="/category/blogging/tumblr/business">Business</a></li>
<li><a href="/category/blogging/tumblr/miscellaneous">Miscellaneous</a></li>
</ul>
</div>
</li>
<li class="navigation-list__item">
<a href="http://codecanyon.net/category/wordpress" class="navigation-list__external-link" title="WordPress Plugins on CodeCanyon">Plugins</a>
</li>
<li class="navigation-list__item">
<a href="/category">More</a>
<div class="navigation-list__dropdown">
<ul class="dropdown">
<li><a href="/category/blogging">Blogging</a></li>
<li><a href="/category/forums">Forums</a></li>
<li><a href="/category/muse-templates">Muse Templates</a></li>
<li><a href="/browse/attributes/compatible_with/facebook">Facebook Templates</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<div class="header-secondary__search">
<form accept-charset="UTF-8" action="/search" class="site-search" id="search" method="get">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
</div>
<input autocomplete="off" id="term" name="term" placeholder="Start Searching …" type="text" value="">
<button type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</header>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment