Monitor Reply

Support

change height and color of navigation bar

Permalink Browser Info Environment April 29, 2014 at 7:58 AM

Hello,

Is it possible to change properties of the top navigation bar?
I want to change height, background-color, text-transform, add a 'search' box and social media icons at far right.

Thanks,
sally

Type:	Discussion
Status:	New

jordif replied on Apr 29, 2014 at 5:09 pm Permalink Reply

Hi Sally,

it is possible to customize the top navigation bar by going to Dashboard -> Themes -> Long Story Short Parallax -> Customize -> Add Your CSS, and pasting the following code:

To change the height:

.navbar-inverse .navbar-inner {
   min-height: 60px;
}

To change the background color:

.navbar-inverse .navbar-inner {
   background: white;
   border: 0;
}

Text transform:

.navbar-inverse .navbar-inner {
   text-transform: uppercase;
}

As for the search box and social media icons, you can add them to the footer or to the Site Name area (on the left of the top navbar). The right navbar allows you to scroll through the slides, but you can not add custom blocks to it (not without tweaking the theme).

Regards,

Jordi

merasafar replied on Apr 30, 2014 at 2:18 am Permalink Reply

thankyou! :D

jkincaid replied on Aug 27, 2014 at 6:46 pm Permalink Reply

I was wondering how I could also remove the colors around the active slide in the navigation as well as control the color and size of the font.

Thank you.

jordif replied on Aug 28, 2014 at 10:27 am Permalink Reply

Hi!

If you want to remove the background of the active menu button:

.nav .active>a {
   background: none !important;
}

If you want to change the text color and size of the menu buttons:

.nav li>a {
   color: black !important;
   font-size: 16px;
}

Regards,

Jordi

Long Story Short Parallax

Support

change height and color of navigation bar

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post