Help with Bootstrap 4 Navbar Links & Tooltip Colors

1

Hello. I am currently working on the freeCodeCamp Portfolio Page challenge, and I need some help with changing the height of the navbar link’s active background color as well as changing the colors of the tooltips.

Navbar link
I’m trying to get the active link on my navbar to look something like this:

a%20background

When the link is active, I want its background color to fill the height of the navbar. I’ve tried adding padding, margins, and line-height, etc. But nothing seems to work. Does anyone know how to do this?

Tooltip colors
I want to set a different color for each of the tooltips on the follows or social section of my portfolio page without affecting the color of the rest of the other tooltips.

Here are some of the codes I’ve tried:

.twitter + .tooltip > .tooltip-inner{background-color:#00a0d1;}
.twitter + .tooltip > .arrow{border-bottom-color:#00a0d1; border-top-color:#00a0d1;}

.twitter .tooltip-inner{background-color:#00a0d1;}
.twitter .tooltip .arrow::before{border-bottom-color:#00a0d1; border-top-color:#00a0d1;}

But none of this works. Does anyone know how to do this?

Here is a link to my portfolio page on CodePen:

Any help is appreciated. Thanks.

2

I recommend using an unordered list for your navigation.
This example was a fork of a W3schools example which I have modified slightly so it looks like your sample:

https://codepen.io/JohnnyBizzel/pen/BYbOpX

Note1. The home link needs re-styling.
Note2. I used !important once to over-ride bootstrap’s default styles.

3

Navbar link
i don’t understand your question. the screenshot looks like on mobile view but your codepen isn’t mobile-ready. first, make the page mobile responsive by setting its viewport: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#Viewport_basics

When the link is active, I want its background color to fill the height of the navbar

the navbar is the container of all links, i doubt you want your entire navbar to look active.

Tooltip colors
.twitter + .tooltip > .tooltip-inner{background-color:#00a0d1;}
but .tooltip isn’t a sibling of .twitter accdg to dev tools
here’s a fiddle of custom tooltips - Edit fiddle - JSFiddle - Code Playground
hope this helps. goodluck @Freya

4

Hello. Thanks for your help. I checked out your link, and I’ve changed my navbar-nav to an unordered list. I also added the following CSS:

.navbar-nav>li >a:active {
background-color:#D1C4E9 !important;
}
li:active {
background: whitesmoke;
}

But it’s still not working. Here’s the link to my modified portfolio page:

Could this be because I’m using Bootstrap 4?

Thanks.

5

Hello. Thanks. Since I’m new to this forum, I was unable to post more pics.

I’m using Bootstrap 4 on my portfolio page. This is what the active link looks like on desktop and mobile and what I want it to look like instead:

a%20background
a%20background1344×500 29.1 KB

The .twitter is just an example of what I tried to get the tooltips to change color. I added a class called twitter to the Twitter icon and then the CSS I mentioned in my first post.

Thanks for your help and the link about custom tooltips. I got it to work.

1 Like
6

first, make the page mobile responsive by setting its viewport: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#Viewport_basics

using developer tool, we can inspect elements’ box model and see which css property we need apply @Freya

css 
.navbar {padding: 0 20px;}
.navbar-nav li {margin-bottom: 0;}
.navbar-collapse {margin: 0 -20px;}
.navbar-collapse .nav-link {padding: 10px 20px;}
@media (min-width: 768px) {
  .navbar-nav .nav-link {padding: 20px;}
}