{"id":24953,"date":"2017-05-08T00:09:22","date_gmt":"2017-05-07T22:09:22","guid":{"rendered":"https:\/\/janthielemann.de\/?p=24953"},"modified":"2017-05-20T20:29:48","modified_gmt":"2017-05-20T18:29:48","slug":"floating-navigation-affiliatetheme-io-make-menu-hug-content","status":"publish","type":"post","link":"https:\/\/janthielemann.de\/tips-and-tricks\/floating-navigation-affiliatetheme-io-make-menu-hug-content\/","title":{"rendered":"“Floating” Navigation in Affiliatetheme.io: How to make the Menu hug the Content"},"content":{"rendered":"

This post is for all the affiliate marketers out there who want to create awesome, beautiful niche sites. To be more precise, to those who use the Affiliatetheme.io<\/a> WordPress theme. In this post you will learn, how to create a cool looking navigation bar which looks like it is hugging the content. Just like this one:<\/p>\n

\"affiliatetheme<\/p>\n

As you see, it looks like the menu extends over the content\u00a0boxed layout. It also seems to hover over the content and is hugging it.\u00a0I borrowed the image\u00a0above from Einhornland<\/a>, a german niche site all about unicorns. To achieve a look like this, all we need to do is tweak the CSS a little bit.<\/p>\n

Affiliatetheme.io<\/h2>\n

But before we start, let me introduce you to the Affiliatetheme.io<\/a>. If you already know it, feel free to skip this section. But for those stumbling about this post by accident, thats something you want to know about, trust me.<\/p>\n

The Affiliatetheme is a genuine WordPress Theme targeted especially for affiliate marketers like you. It comes with API interfaces for a lot of platforms like Amazon, Affilinet, Zanox, Belboon, eBay and Adcell.<\/p>\n

Also it has some really neat features like product filters, comparison tables and even the possibility to setup a fake shop. You can however also\u00a0import products or create your own ones and link them to detail pages. It has dozens of possibilities to showcase your products and is fully stylable and customizable. You should definitely check it out.<\/p>\n

How to make the Affiliatetheme.io Navigation Bar Hover<\/h2>\n

Okay, enough advertising. Let’s get back to business. To achieve our goal of extending the navigation bar and make it “hug” the content below, we need to do a few things:<\/p>\n