The content within a div block is having trouble aligning vertically

I need help with centering the content inside my fixed-top navigation bar vertically. I am using bootstrap to design my page, and the navigation bar consists of an image as the nav header and a container with links.

The container surrounding these elements does not have vertical padding, only margins for content underneath it.

<!--Navigation Bar-->
    <nav class="navbar navbar-default navbar-fixed-top navbar-wrap">
        <div class="container-fluid">
            <div class="navbar-header">
                <img src="img/logo.png" />
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#about">Who Am I?</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>

I've attempted setting the .container-fluid>ul to be relative to the container and set the margin to auto. I want the site to scale well on mobile devices without fixed margins or padding, hence my use of bootstrap.

I am a novice developer working on putting together a website to showcase my school and side projects.

If you'd like to see my CSS, feel free to let me know: https://i.sstatic.net/qIZZm.jpg

.navbar-wrap {
    padding: 0;
    background-color: #77B69C;
}

.nav {
    padding-right: 15px;
}

.navbar-right {
    margin-right: 0;
}

.container-fluid>ul {
    position: relative;
    height: 100%;
    margin: auto;
}

.navbar-default .navbar-nav>li>a {
    color: #ECF0F1;
    border-radius: 5px;
    transition: background-color 0.5s;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #171F26;
    background-color: #fff;
}
htmlcsstwitter-bootstrap

Answer №1

There are various ways to approach this issue based on what would be most effective.

  • 1) You have the option to use text and modify it with CSS as shown in the first example of a navbar.
  • 2) Another method is to restrict the image to the default height of the navbars, demonstrated in example 2.
  • 3) Additionally, you can adjust the height and line height of the image that surpasses the navbar's height, like in example 3.

** If you are utilizing a preprocessor (LESS or SASS), tweaking the height becomes simpler since the rest is taken care of automatically.

I've also included the HTML code to ensure your navbar collapses (Navbar Docs) below 768px into the mobile setup (uncertain if that was intentional).

(if you opt for the 2nd or 3rd option, remember to remove the margin-top class from navbar-wrap* to fix the navigation bar back to the top.) 

@import url(https://fonts.googleapis.com/css?family=Hind+Vadodara);

/**Text CSS**/

.navbar.navbar-wrap {
  background: #77B69C;
}
.navbar a.navbar-brand,
.navbar a.navbar-brand:hover,
.navbar a.navbar-brand:focus {
  font-family: 'Hind Vadodara', sans-serif;
  font-size: 30px;
  color: #000;
  letter-spacing: 5px;
}
.navbar .navbar-brand span.lname {
  color: #fff;
}
.navbar.navbar-wrap .navbar-nav > li > a {
  font-family: 'Hind Vadodara', sans-serif;
  color: #ECF0F1;
  border-radius: 5px;
  transition: background-color 0.5s;
}
.navbar.navbar-wrap .navbar-nav > li > a:hover {
  color: #171F26;
  background-color: #fff;
}
@media (min-width: 768px) {
  .navbar.navbar-wrap .navbar-right {
    margin-right: 15px;
  }
  .navbar.navbar-wrap .navbar-brand {
    margin-left: 15px;
  }
}
/**IMG CSS**/

.navbar.navbar-wrap2 .navbar-brand {
  padding: 0;
  margin: 0;
}
.navbar.navbar-wrap2 .navbar-brand img {
  height: 50px;
  width: 300px;
  padding: 0;
  margin: 0;
  left: 0;
}
.navbar.navbar-wrap2 {
  background: #77B69C;
  margin-top: 200px;
}
.navbar.navbar-wrap2 .navbar-nav > li > a {
  font-family: 'Hind Vadodara', sans-serif;
  color: #ECF0F1;
  border-radius: 5px;
  transition: background-color 0.5s;
}
.navbar.navbar-wrap2 .navbar-nav > li > a:hover {
  color: #171F26;
  background-color: #fff;
}
.navbar.navbar-wrap2 .navbar-brand img {
  margin-left: 15px;
}
@media (min-width: 768px) {
  .navbar.navbar-wrap2 .navbar-right {
    margin-right: 15px;
  }
}
/**LARGE IMG CSS**/

.navbar.navbar-wrap3 .navbar-brand {
  padding: 0;
  margin: 0;
}
.navbar.navbar-wrap3 .navbar-brand img {
  height: 75px;
  width: 300px;
  padding: 0;
  margin: 0;
  left: 0;
}
.navbar.navbar-wrap3 {
  background: #77B69C;
  margin-top: 400px;
}
.navbar.navbar-wrap3 .navbar-header {
  height: 75px;
}
.navbar.navbar-wrap3 .navbar-toggle {
  margin-top: 20px;
}
.navbar.navbar-wrap3 .navbar-nav > li > a {
  font-family: 'Hind Vadodara', sans-serif;
  color: #ECF0F1;
  border-radius: 5px;
  transition: background-color 0.5s;
}
.navbar.navbar-wrap3 .navbar-nav > li > a:hover {
  color: #171F26;
  background-color: #fff;
}
.navbar.navbar-wrap3 .navbar-brand img {
  margin-left: 15px;
}
@media (min-width: 768px) {
  .navbar.navbar-wrap3 .navbar-right {
    margin-right: 15px;
  }
  .navbar.navbar-wrap3 .navbar-nav > li > a {
    line-height: 45px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-wrap navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#"><span class="fname">James</span> <span class="lname">Wong</span></a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">Who Am I?</a>

        </li>
        <li><a href="#projects">Projects</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<hr>
<nav class="navbar navbar-default navbar-wrap2 navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav2" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a class="navbar-brand" href="#">
        <img src="http://academe.co.uk/wp-content/uploads/2014/10/sugarcrmLogoWhiteBackground_RGB.png" />
      </a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-nav2">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">Who Am I?</a>

        </li>
        <li><a href="#projects">Projects</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<hr>
<nav class="navbar navbar-default navbar-wrap3 navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav3" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a class="navbar-brand" href="#">
        <img src="http://academe.co.uk/wp-content/uploads/2014/10/sugarcrmLogoWhiteBackground_RGB.png" />
      </a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-nav3">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">Who Am I?</a>

        </li>
        <li><a href="#projects">Projects</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the horizontal position of a text element using CSS

I am faced with a specific challenge where I need to center the text "test" within a text tag using only CSS, without being able to directly change the HTML. <text width="13.89" height="13.89" x="291.46999999999997" y="156.55" transform= ...

javascripthtmlcsssvg

The listbox is experiencing display issues when viewed in the Chrome browser

Hey, I'm having an issue with adding background color and border to my Listbox. There seems to be a white strip on the right and bottom of the options. The layout rearranges properly when hovering over each item. <select> <option>H ...

htmlcss

"Manipulating a drop-down menu in HTML with data from a MySQL database using PHP

Hello there, I could use some assistance. I am working on a straightforward web application and require help with a specific task. Here's the scenario: I have an HTML form with a single combo box. I would like to populate this combo box with data fro ...

phphtmlmysqlforms

Launching an image link within the same location on the subsequent page to which it is directed

I'm completely new to creating websites so I may not be using the correct terminology. I've searched with various terms and ideas but haven't found any solutions to help me ask my question effectively or find examples of what I'm lookin ...

javascripthtmljquerycss

Unraveling the mystery behind table cells failing to wrap their content when set to 100% height

Original inquiry (REVISED) CSS: Why does a table-cell sibling with a height of 100% exceed the body of the table-row? Experimenting with CSS tables, I am striving to achieve an evenly spaced column layout. I aim to have an "aside" on the left side th ...

htmlcsscss-tables

Unable to dynamically populate Bootstrap select with real-time search and multiple options using jQuery

How can I dynamically populate a select statement with options retrieved from PHP code? <select name='friends[]' id='friends' class='selectpicker show-tick form-control' data-live- search='true' multiple& ...

javascriptjquerytwitter-bootstrapmulti-selectlivesearch

JavaScript utilizing an API to retrieve specific data values

Below is some API Data that I have: [ { "symbol": "AAPL", "name": "Apple Inc.", "price": 144.98, "changesPercentage": -1.22, "change": -1.79, ...

javascripthtmlcssajaxapi

What is the process for creating a login page that redirects automatically?

For instance: Whenever I enter gmail.com, it automatically takes me to this link: https://accounts.google.com/signin/v2/identifier?service=mail&passive=true&rm=false&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&ss=1&scc=1&ltmp ...

javascriptphphtmlhttp-redirect

CSS overflow property does not take effect when set to hidden

I'm having trouble understanding why the overflow: hidden property is being overridden by a descendant element. Take a look at this example I've put together http://jsfiddle.net/2fRxc/. HTML <div class="relative"> <div class="overf ...

htmlcss

Creating image filters using an object in jQuery

I am faced with a challenge where I have multiple image tags nested within a div that has the class google-image-layout. Each image is equipped with various data attributes, including: data-anger="0" data-disgust="0" data-facedetected="0" data-fear="0" da ...

javascriptjqueryhtml

show an HTML webpage within a <div> container using AJAX technology

I am trying to include an HTML page named Introduction.html (located in the same folder as x.html) within div1. However, it does not seem to be loading properly. Below is a snippet of the code from x.html x.html <!DOCTYPE html> <h ...

javascriptjqueryhtmlajaxload

Creating visually appealing website designs with Firefox by implementing smooth background image transitions using Javascript with

Currently, I am facing an issue with the banner area on my website. The background of the banner is set to change every 10 seconds using JavaScript. However, there seems to be a flickering effect that occurs for a brief moment when the background-image is ...

javascripthtmlcssbackground-image

What are some strategies for accessing the original values of form components that have not been altered when using ngModel?

I am currently developing a form and I intend to utilize the previous values as "value" in the form. By employing ngModel dynamically, I am able to change some properties. However, I have encountered an issue where the field that remains unchanged by the u ...

htmlangularformsevent-handlingmean-stack

Using JQuery to modify several background images in unison

I have a CSS code that uses 8 images to create a frame: background-image: url(images/blue/tl.png), url(images/blue/tr.png), url(images/blue/bl.png), url(images/blue/br.png), url(images/blue/t.png),url(images/blue/b.png),url(images/blue/l.png),url(images/b ...

javascriptjqueryhtmlcssbackground

Discover the art of customizing child elements using vanilla extract!

I recently started using vanilla extract to add styles to a NextJS application. Is there a way to style child elements within the parent element without having to create another class? My React component has a structure like this: <ul className={style ...

cssnext.jsvanilla-extract

Utilizing Angular 6 and JavaScript to invoke two functions within an (ngClick) event in both the Component and JavaScript

I have a requirement to execute two functions in my click event, one for my component and the other for a custom JavaScript function. Here is the code snippet: Angular click event: <button type="button" class="btn btn-primary" (click)="Plans(); " [att ...

javascriptangularhtmlangular6angular7

How can you use a jQuery Selector to target all images and sources within dynamic containers?

I am currently attempting to identify all images and their paths (srcs) within the dynamic containers. The dynamic containers refer to container patterns stored in an array, which is filled dynamically. For example: var containers = new Array( ...

jqueryhtmlselector

Employing delegate for switching roles between classes

I'm having trouble using the jQuery delegate function to toggle classes. What I want to achieve is toggling the class of <li class="unselected-values"> to <li class="<li class="unselected-values"> when the client clicks on the label ...

jquerycssrazordelegates

Obtain the image format from an HTML page using the Jsoup library on Android

<div class="_jjzlb" style="padding-bottom: 55.2778%;"><img alt="AT Dam party.. #nashik #big #dam" class="_icyx7" id="pImage_11" src="https://instagram.fbom1-2.fna.fbcdn.net/t51.2885-15/e35/17438694_254543168340407_6435023364997251072_n.jpg" style ...

phpandroidhtmljsoup

Personalize PDF display using Bootstrap and CodeIgniter

In my Bootstrap collapse menu, I have the following setup: <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" a ...

htmlcodeignitertwitter-bootstrap-3bootstrap-4codeigniter-3