Move Bootstrap navbar measurement equal to its height

Question

The website I am developing using bootstrap has a header image followed by a bootstrap navbar. We like having a transparent navbar on the image but it looks weird when the navba

Answer 1

1) It seems that the navbar will, as long as it is only one line tall, be a constant height of 50px. If this is the case, then the fix to number one is as simple as adding

position:relative;
top:-50px;

to .navbar-engage. If this is not the case (the navbar can change height even if it is only one line tall - such as if the font size changes) then a bit of javascript will be needed get the job done.

2) To change the text color when the nav bar is all one line, we need a media query. The following will make the text white when the nav bar is a single line:

@media (min-width: 768px) {
    .navbar-engage a  {
        color:white;
    }
    .navbar-engage li a:hover {
        color:black;
    }
}

The second selector, .navbar-engage li a:hover, was added to make the text black on hover. This was not a part of your original request, but it greatly added to the readability of the content. Take it or leave it - up to you.

3) All we need to do is add another media query that will undo our positioning change and modify the background color of the nav bar:

@media (max-width: 767px) {
    .navbar-engage {
        top:0px;
        background:#808184;
    }
}

The final CSS will look like this:

.navbar-engage {
    background-color: rgba(0, 0, 0, 0.5);
    filter: progid: DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
    -ms-filter: progid: DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
    border-color: #e7e7e7;
    color: #FFFFFF;
    position: relative;
    top: -50px;
}
@media (min-width: 768px) {
    .navbar-engage a {
        color: white;
    }
    .navbar-engage li a:hover {
        color: black;
    }
}
@media (max-width: 767px) {
    .navbar-engage {
        top: 0px;
        background: #808184;
    }
}

Please bear in mind, however, that in order to do this with CSS alone, some numbers had to be hard-coded in, meaning that changes to your markup could result in the css needing to be tweaked slightly to make things work.

I also have the working fiddle available here.