How to create Top Floating navigation bar,Menu bar in Thesis theme

Gowtham V
5 Min Read

Our site Mytechshout is made as a Blogging Technology Blog.Right now you will be seeing a cool floating logo with menu bar at the top of our theme.It was designed based on the floating design of the Stumbleupon top bar.In this post i will show you how to add a Top floating navigation or menu bar to thesis theme.Are you exited!! Then let’s get started.

If you are not using the world’s best WordPress theme,its the right time as Thesis theme 2.0 will be 297$.Early birds will get for less.

BUY THESIS THEME NOW  !!! Or Read about Thesis theme 2.0 Features

The screenshot of the Stumbleupon floating bar fixed at the top.

 floating menu bar thesis theme

Our stumbleupon floating bar consist of a horizontal logo at the start of the floating thesis menu bar followed by the menu links.Follow these simple two steps to add this floating top bar to your site.

1.Add the following php code to the custom_functions.php file located in the custom folder of the thesis theme. Note: Before editing have a backup of the files.

function Floating_navigation_bar() {
?>
<div id="tb-toolbar">
<div id="primary-nav"> <div> <li><a href="https://mytechshout.com"><img src="https://mytechshout.com/wp-content/themes/thesis_182/custom/images/newlogo.png" alt="Home" width="300" height="40"/></a></li>
<li><a href="https://mytechshout.com/" title="Home Page">Home</a></li>
<li><a href="https://mytechshout.com/category/seo" title="SEO">SEO</a></li>
<li><a href="https://mytechshout.com/category/thesis/thesis-theme-2-0-thesis" title="Thesis theme 2.0">Thesis theme 2.0</a></li>
<li><a href="https://mytechshout.com/category/wordpress" title="Archives">WordPress</a></li>
<li><a href="https://mytechshout.com/category/thesis-customization" title="Thesis">Thesis Customization</a></li>
<li><a href="https://mytechshout.com/make-money-with-my-tech-shout" title="Write For Us">Write For Us</a></li>
</div>
</div>
</div>
<?php
}
add_action('thesis_hook_before_html', 'Floating_navigation_bar');

Note:

  • Change the logo url in red color in the above code to the exact url of your own logo.Creating the transparent background logo is explained in step 3 of this post.
  • Make sure that you have changed the url links to match your sites links before saving the file. Replace my logo URL with your’s the logo dimensions are width=”300″ and height=”40″ .You can change the size of the logo by changing the values of the width=”x” and height=”y”

 

2.After adding the code to the custom_functions.php file add the below css code to the custom.cssfile.If you want to change the color of the floating menu bar change the background color and the other color options to match your site.

#tb-toolbar {
width: 100%;
height: 40px;
background: #2f2f2f;
position:fixed;z-index:1000;
}
#primary-nav { background: url(images/alert-overlay.png) repeat-x; margin-bottom: 30px; font-size: 11px; color: #fff; line-height: 40px; overflow: hidden; }
#primary-nav li { float: left; list-style: none; padding: 0; } #primary-nav li a { display: block; font-size: 12px; font-weight: bold; padding: 0 15px; color: #fff; line-height: 36px; } #primary-nav li a:hover { color: #e9e9e9; text-decoration: none; } #primary-nav li ul li a:hover { color: #369; text-decoration: underline; }
#primary-nav li ul li { background: none; } #primary-nav .nav a.current,
#primary-nav .nav a:hover, #primary-nav .nav li.current_page_item a, #primary-nav .nav li.current_page_parent a, #primary-nav .nav li.current-menu-ancestor a, #primary-nav .nav li.current-cat a, #primary-nav .nav li.current-cat-parent a, #primary-nav .nav li.current-menu-item a { background: url(images/arrow-up.png) no-repeat center 32px; border: none; display: block; line-height: 36px; padding: 0px 15px !important; -moz-border-radius: 0;
-webkit-border-radius: 0;border-radius: 0;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}
In this code the two images are used(Highlighted with green color text).Download these two images arrow-up ,alert-overlay and upload it with the same name as in the code into the custom>>Images folder of your Thesis theme.
3.Adding the logo image :
Create a new png image with dimension 300*40 pixels by using photoshop with a transperant background.You can make use of our logo to create yours.Right click on the below png image and save the image.After saving open it with photoshop and edit the text and the design as your like.
Thesis Floating logo with menu bar
Hope you have added the floating navigation menu bar to your thesis theme successfully.

Thesis theme 2.0 is expected to be released in the month of  August. With the release of thesis theme 2.0 ,customization are going to become a lot easier and with the drag and drop options it will be a lot of fun to play with the theme designs.Hope you enjoyed customizing thesis theme with us.If you know some customization you can make this floating menu bar code for hello bar too..Do drop your comments in the comment section below.

From now mytechshout will be posting posts only about Blogging technologies like thesis theme,wordpress plugins etc.All the other blogging tips will be posted in our upcoming new blog which will be announced soon.Subscribe to us to receive updates about it

Share This Article
Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *