Cannot customize navigation bar color and logo position

Sparkling
1

Hello

I have difficult time to customize navigation bar with my logo. I spent time 3 hrs but still could not success.

  1. Can you let me know how to do gradient color for full width Navigation bar? e.g. color a to color b, transparent to color b.
  2. How to position logo image to left or right?
  3. How to do transparent Navigation bar?

here is my current custom CSS
#page .navbar-default .navbar-nav li a { font-size: 16px; background-image: linear-gradient(to bottom, white, pink); padding: 18px 15px; }
#page .navbar-default .navbar-nav li > a:hover { color: #FF14E7; background-color:#FFAEFF;}
#page nav.navbar.navbar-default .container {
width: 77%; } <<< If I not set this code my navigation bar will stay lower-right my logo

screenshot

My website

2

Is it limitation?

3

Hi @ripperroo,

I hope you are well today and thank you for your questions.

1. Can you let me know how to do gradient color for full width Navigation bar? e.g. color a to color b, transparent to color b. 3. How to do transparent Navigation bar?

Could you please tell me exactly whether you want the Navigation bar transparent or gradient?

2. How to position logo image to left or right?

I can see the logo is displayed at the left side on your shared site.

To display it to the right side try adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS


@media (min-width: 768px){
body .navbar-header {
    float: right;
}
}

Best Regards,
Movin

4

Thank you for replying.

1 and 3 Can I have steps to do both. Because I will change the style in the future.

5
1. Can you let me know how to do gradient color for full width Navigation bar? e.g. color a to color b, transparent to color b.

Use the below custom CSS code to achieve this.

nav.navbar.navbar-default {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, yellow); /* Standard syntax */
}
3. How to do transparent Navigation bar?

Use the below custom CSS code to achieve this.


nav.navbar.navbar-default {
    background-color: transparent;
}