Floating menu

Hi @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

thanks you master, you are the best

How to change navbar color? ex: #2196F3 color code

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.

https://www.w3schools.com/html/html_colors.asp
https://www.w3schools.com/html/html_colorvalues.asp
https://www.w3schools.com/tags/ref_colorpicker.asp

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?

To custom CSS?

Yes

floating menu not work in mobile view

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;
}

thanks very much work perfectly

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.

https://imgur.com/a/OOal0

You can change the background color of whole navbar by using the below CSS code.

nav.navbar.navbar-default {
    background-color: #eee;
}