Title: Floating menu
Last modified: September 1, 2016

---

# Floating menu

 *  Resolved [alakulihal](https://wordpress.org/support/users/alakulihal/)
 * (@alakulihal)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/floating-menu-2/)
 * How to create a menu of all be floated ? When the page down , the menu still 
   appear visible .

Viewing 11 replies - 1 through 11 (of 11 total)

 *  [Vinod Dalvi](https://wordpress.org/support/users/vinod-dalvi/)
 * (@vinod-dalvi)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/floating-menu-2/#post-7654924)
 * Hi [@alakulihal](https://wordpress.org/support/users/alakulihal/),
 * I hope you are well today and thank you for your question.
 * You can try achieving this by adding the following CSS code in the Custom CSS
   option of your theme on the below path.
 * Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom
   CSS
 *     ```
       @media (min-width: 768px){
       header#masthead {
           margin-top: 50px;
       }
       nav.navbar.navbar-default {
           position: fixed;
           width: 100%;
           top: 0;
           left: 0;
           z-index: 9999;
       }
       body.admin-bar nav.navbar.navbar-default {
         top: 30px;
       }
       }
       ```
   
 * Best Regards,
    Vinod Dalvi
 *  Thread Starter [alakulihal](https://wordpress.org/support/users/alakulihal/)
 * (@alakulihal)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/floating-menu-2/#post-7654929)
 * thanks you master, you are the best
 *  Thread Starter [alakulihal](https://wordpress.org/support/users/alakulihal/)
 * (@alakulihal)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/floating-menu-2/#post-7654931)
 * How to change navbar color? ex: #2196F3 color code
 *  [Vinod Dalvi](https://wordpress.org/support/users/vinod-dalvi/)
 * (@vinod-dalvi)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/floating-menu-2/#post-7654934)
 * You are most welcome here 🙂
 * > How to change navbar color? ex: #2196F3 color code
 * You can use the below CSS code to change all navbar colors.
 *     ```
       #page .navbar-default .navbar-nav > li > a {
           color: #1c202a;
       }
   
       #page .navbar-default .navbar-nav > .active > a,
       #page .navbar-default .navbar-nav > .active > a:hover,
       #page .navbar-default .navbar-nav > .active > a:focus,
       #page .navbar-default .navbar-nav > li > a:hover,
       #page .navbar-default .navbar-nav > li > a:focus,
       #page .navbar-default .navbar-nav > .open > a,
       #page .navbar-default .navbar-nav > .open > a:hover,
       #page .navbar-default .navbar-nav > .open > a:focus {
           color: #a161bf;
           background-color: transparent;
       }
   
       #page .dropdown-menu > li > a {
           color: #636467;
       }
   
       #page .dropdown-menu > li > a:hover,
       #page .dropdown-menu > li > a:focus,
       #page .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
       #page .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
           color: #fff;
           background-color: #a161bf;
       }
       ```
   
 * Please change the color value in the above code to whatever you want to use by
   referring the following pages.
 * [http://www.w3schools.com/html/html_colors.asp](http://www.w3schools.com/html/html_colors.asp)
   
   [http://www.w3schools.com/html/html_colorvalues.asp](http://www.w3schools.com/html/html_colorvalues.asp)
   [http://www.w3schools.com/tags/ref_colorpicker.asp](http://www.w3schools.com/tags/ref_colorpicker.asp)
 *  Thread Starter [alakulihal](https://wordpress.org/support/users/alakulihal/)
 * (@alakulihal)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/floating-menu-2/#post-7654936)
 * Copy this code:
 * > #page .navbar-default .navbar-nav > li > a {
   >  color: #1c202a; }
   > #page .navbar-default .navbar-nav > .active > a,
   >  #page .navbar-default .navbar-
   > nav > .active > a:hover, #page .navbar-default .navbar-nav > .active > a:focus,#
   > page .navbar-default .navbar-nav > li > a:hover, #page .navbar-default .navbar-
   > nav > li > a:focus, #page .navbar-default .navbar-nav > .open > a, #page .navbar-
   > default .navbar-nav > .open > a:hover, #page .navbar-default .navbar-nav > .
   > open > a:focus { color: #a161bf; background-color: transparent; }
   > #page .dropdown-menu > li > a {
   >  color: #636467; }
   > #page .dropdown-menu > li > a:hover,
   >  #page .dropdown-menu > li > a:focus, #
   > page .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, #page.
   > navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #fff;
   > background-color: #a161bf; }
 * To custom CSS?
 *  [Vinod Dalvi](https://wordpress.org/support/users/vinod-dalvi/)
 * (@vinod-dalvi)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/floating-menu-2/#post-7654945)
 * > To custom CSS?
 * Yes
 *  Thread Starter [alakulihal](https://wordpress.org/support/users/alakulihal/)
 * (@alakulihal)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/floating-menu-2/#post-7654956)
 * floating menu not work in mobile view
 *  [Vinod Dalvi](https://wordpress.org/support/users/vinod-dalvi/)
 * (@vinod-dalvi)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/floating-menu-2/#post-7654957)
 * I purposefully disabled it on mobile view so that it will not occupy much space
   on small device screen.
 * If you want to display it on mobile view then please use the below CSS code instead
   of above shared code.
 *     ```
       header#masthead {
           margin-top: 50px;
       }
       nav.navbar.navbar-default {
           position: fixed;
           width: 100%;
           top: 0;
           left: 0;
           z-index: 9999;
       }
       body.admin-bar nav.navbar.navbar-default {
         top: 30px;
       }
       ```
   
 *  Thread Starter [alakulihal](https://wordpress.org/support/users/alakulihal/)
 * (@alakulihal)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/floating-menu-2/#post-7654958)
 * thanks very much work perfectly
 *  Thread Starter [alakulihal](https://wordpress.org/support/users/alakulihal/)
 * (@alakulihal)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/floating-menu-2/#post-7654961)
 * This code
 *     ```
       #page .navbar-default .navbar-nav > li > a {
       color: #1c202a;
       }
   
       #page .navbar-default .navbar-nav > .active > a,
       #page .navbar-default .navbar-nav > .active > a:hover,
       #page .navbar-default .navbar-nav > .active > a:focus,
       #page .navbar-default .navbar-nav > li > a:hover,
       #page .navbar-default .navbar-nav > li > a:focus,
       #page .navbar-default .navbar-nav > .open > a,
       #page .navbar-default .navbar-nav > .open > a:hover,
       #page .navbar-default .navbar-nav > .open > a:focus {
       color: #a161bf;
       background-color: transparent;
       }
   
       #page .dropdown-menu > li > a {
       color: #636467;
       }
   
       #page .dropdown-menu > li > a:hover,
       #page .dropdown-menu > li > a:focus,
       #page .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
       #page .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
       color: #fff;
       background-color: #a161bf;
       }
       ```
   
 * I can change background color of navbar, but not completely. what I want is the
   navbar background color.
 * [http://imgur.com/a/OOal0](http://imgur.com/a/OOal0)
 *  [Vinod Dalvi](https://wordpress.org/support/users/vinod-dalvi/)
 * (@vinod-dalvi)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/floating-menu-2/#post-7654962)
 * You can change the background color of whole navbar by using the below CSS code.
 *     ```
       nav.navbar.navbar-default {
           background-color: #eee;
       }
       ```
   

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Floating menu’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/activello/1.4.9/screenshot.png)
 * Activello
 * [Support Threads](https://wordpress.org/support/theme/activello/)
 * [Active Topics](https://wordpress.org/support/theme/activello/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/activello/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/activello/reviews/)

 * 11 replies
 * 2 participants
 * Last reply from: [Vinod Dalvi](https://wordpress.org/support/users/vinod-dalvi/)
 * Last activity: [9 years, 8 months ago](https://wordpress.org/support/topic/floating-menu-2/#post-7654962)
 * Status: resolved