How to modify the colors of the 'freelancer' template?

Bootstrap Studio Help
1

Hi everyone!

First of all I want to say that Bootstrap Studio is an amazing tool and that I’m so happy about the purchase! :slight_smile:

I’m having some issues with customzing the navigation bars from the one pager templates (‘freelancer’ and ‘agency’).

For example in the ‘freelancer’ template, I’d like to customize the nav items. I’d like to change the color and the rounding of the background when the corresponding section of the page is active or when the user clicks on the nav item and activates it.

To do this, I tried to edit the *.css but as I learned in your (exceptionally awesome) video tutorials, I created a new 'styles.css" and copied the ‘.navbar’ entry from Bootsrap to my new css file. But this unfortunately doesn’t work and as soon as I do this, the whole Navbar isn’t sticky to the top anymore.

So could someone please enlighten me on how to customize the Navigation bar colors without destroying the template? :smiley:

Thanks and have a nice day,
Daniel

2

You almost certainly copied the wrong class. For example, with the Agency template, the class you would copy and modify to change the color of the navigation links on active and hover is this one,

#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
  color: #fed136;
}

You would change the color rule to change the color of the text. If, for example, you wanted the text to be red and the background color to be black on hover, you’d add the following CCS to the following classes…

#mainNav .navbar-nav .nav-item .nav-link:hover {
  color: #ff0000;
  background: black;
}

Which would result in this…

image

Of course, this doesn’t look correct on the mobile menu because there’s no padding, so you’d need to makes some adjustments for mobile.

If you wanted to add a radius to the button so it looks like this…

image

You would add the border radius CSS rule to this class…

@media (min-width: 992px) {
  #mainNav .navbar-nav .nav-item .nav-link {
    padding: 1.1em 1em !important;
    border-radius: 30px;
  }
}

Because there’s a media query on this class, the radius change won’t be visible below the lg screen size.

When you start to modify the look/feel of the navigation links (or really anything on your site,) you have take into account both the desktop and mobile appearance, and change the relevant CSS classes accordingly. For example, if you add a background color to a nav link so it appears to be a button, you might want to add some margin between the buttons.

If you’re going to start modifying CSS, it’s really best to learn CSS from the ground up, so you fully understand the syntax, ID’s, classes, pseudo classes, how the cascade works, and so on. While you might be able to figure some things out through trial and error, to be a good web developer, you really want to have a good handle on CSS. I would start here… CSS Tutorial