Enhancing Your Brand with Bootstrap 4 Navbar Customization

Hi there! I just started learning Bootstrap today, coming from a background in HTML/CSS. I decided to dive right into Bootstrap 4 instead of starting with version 3, even though I know it's still in alpha. I've been experimenting with it but I can't seem to figure out how to solve my current issue after searching for a while.

Please take a look at this image

The logo in my navbar-brand is too big for the navbar and causing the menu items to misalign. I simply want to vertically align the items so they are centered with the logo.

<nav class="navbar navbar-light bg-faded navbar-full">
      <a class="navbar-brand" href="#"><img src="http://www.a1solarandelectrical.com.au/wp-content/uploads/2016/02/logoMedium.png" /></a>
      <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
      <div class="collapse navbar-toggleable-md" id="navbarResponsive">
          <ul class="nav navbar-nav">
              <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">About Us</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Solar Power</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">No Obligation Quote</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Contact Us</a>
              </li>
          </ul>
      </div>
  </nav>

This is my current code. I haven't added any custom CSS yet, so everything else is at default settings. The logo size is currently set at 85px in height.

Thanks in advance for your help!

htmlcsstwitter-bootstrapnavbarbootstrap-4

Answer №1

To achieve the desired effect, simply include the following CSS code:

@media (min-width: 992px) {
    .navbar-nav li a { line-height: 80px; }
}

@media (max-width: 991px) {
    .navbar-brand { float: none; }
}

For reference, visit http://www.bootply.com/dPkdVgNJZ5

Answer №2

By now, you may have already found a solution to the issue. As per the guidelines on http://getbootstrap.com/docs/4.0/components/navbar/

"Incorporating images into the .navbar-brand typically necessitates custom styles or utilities for correct sizing. Here are some instances to illustrate."

<!-- Combination of image and text -->
<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
    </a>
</nav>

Answer №3

Insert this snippet of code right before the closing </head> tag: 

<style>
.nav > li > a{
  margin-top: 20px; 
 }
</style>

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

Tips for accessing and retrieving stored values within an array using JavaScript

I am trying to display stored values in an array one by one within an HTML table. The issue I'm facing is that currently, all values are being fetched at once. Can someone assist me in reading the values one by one? <script> var time=""; ...

javascripthtmlarrayshtml-table

Error: Attempting to assign a value to the property 'running' of an undefined variable

While working with Nuxt.js, I encountered an issue related to reading the running property of my client object. Here is the HTML code snippet: <b-button v-show="!(projectSelecter(project.ID)).isStarted" //this work just fine variant="success" c ...

javascripthtmltwitter-bootstrapvue.jsnuxt.js

Switch the background color of the checkbox div or label with a single click

I have successfully implemented the following code, with one small issue. When I select the checkbox, the background color of the div changes from #fff to #ffe600 as expected. However, after submitting the form and refreshing the page, the background color ...

javascriptjqueryhtmlcsscheckbox

I need a layout similar to the navbar on http://thecoloradan.com/ but I am not asking for instructions on how to do it

Have you seen the stunning navbar on this website? It appears to merge with the background upon loading, then smoothly shifts to the top of the page as you scroll. The transition is accompanied by a lovely animation. I am curious about the steps needed to ...

javascriptjqueryhtmlcsstwitter-bootstrap

The reduced motion media query prevented me from using a Bootstrap modal with animations

I'm currently working with Bootstrap 4 modals and I've encountered an issue where the fade animation and slide animation are not being displayed. After doing some research, I discovered that the problem lies within the transitions.scss file which ...

cssbootstrap-4

The integration of ag-grid webpack css is not reflecting on the website as intended

I'm facing an issue with ag-grid in my react application where I can't seem to get the CSS working properly with webpack. The grid is currently displaying like this: image: https://i.sstatic.net/RPKvH.png const path = require("path"); var webp ...

cssreactjswebpackag-gridag-grid-react

Ways to retrieve an HTML form

I have designed an HTML form that submits data to addstuds.php for inserting records into a MySQL database. <form name="formcheck" method="post" action="addstuds.php"> <td width="30" height="35"><font size="3">*ID Number:</td> < ...

phpmysqlhtml

Steps to invoke controller through ajax and transmit $_POST variables

I am trying to make an AJAX call to a controller in order to save data into a database. Once the data is saved, I want to display it in a dropdown list. However, I am facing some issues and not sure what to do next. Below is the code snippet from my view ...

javascriptphphtmlmysqlajax

Issue with Bootstrap's collapsed navbar remains unresolved even after interaction with sub menu

When using Bootstrap, I encountered an issue where the submenus are not staying collapsed after expanding a menu and clicking on a submenu. To address this, I modified the code from class="collapse list-unstyled" to class="collapse list-unstyled show". Thi ...

javascriptbootstrap-4navbar

Issue with React: Caret icon in dropdown menu shifts position when page is resized to iPad or smaller dimensions

I'm facing an issue with a styled react component that has a custom dropdown menu featuring a caret icon. Whenever I test the responsiveness of the dropdown, the caret icon ends up outside the intended area. To resolve this, I've wrapped the drop ...

cssreactjscss-positionresponsivestyled-components

Guide to selecting an element with a combination of text and a random number using Selenium with JavaScript

<a id="Message4217" class="btn-sm btn-danger Message" data-id="4217"><span class="icon-adjustment icon-trash"></span> Delete</a> The objective is to remove a message base ...

javascripthtmlseleniumselenium-webdriver

Using JavaScript to modify the text of a label seems to be a challenging

UPDATE: After carefully reviewing my code once again, I have identified the issue. The problem lies in the positioning of a certain function (unfortunately not included here), but rest assured that I have rectified it! Allow me to provide a brief summary ...

javascripthtmllabel

Strip all textual content from within HTML div elements while retaining the original HTML tags and formatting

I currently have the following HTML code: <div> Here <a href="#"> is </a> <p> Text, that I want to </p> be removed </div> This is what I desire: <div> <a href="#"> </a> <p& ...

javascriptjqueryhtmldom

What is the process of implementing a tree view hierarchy in PHP using CodeIgniter?

I have an array structured like this: Array ( [0] => Array ( [id] => 1 [child_name] => "Emma" [parent_name] => "Mr Brown" ) [1] => Array ( [id] => 2 ...

phphtmlarrayscodeigniter

What is the best way to navigate back to the top of the page once a link has been clicked?

One issue I'm facing is that whenever I click on a link in NextJS, it directs me to the middle of the page: <Link href={`/products/${id}`} key={id}> <a> {/* other components */} </a> </Link> I believe the problem l ...

javascriptcssreactjsnext.js

Is there a way to create a flexbox that combines a centered fixed child with a fixed child at the bottom?

I'm trying to create a layout using flexbox that looks like this: | | | | | CENTER FIXED ELEMENT | | | | BOTTOM FIXED ELEMENT | Here is the flexbox CSS I've attempted: .wrapper{ ...

htmlcsslayoutflexbox

How can TypeScript be used to update the values and text of an HTML element?

Is it possible to update specific attributes of an html element using typescript? Below is the code snippet: HTML:- <a ref="#" id="userProfileName" style="padding-top: 0px; padding-bottom: 0px; padding-right: 10px; padding-left ...

htmltypescript

Trouble with alignment of text in two rows using Div/text - a simple fix needed

I'm currently facing some challenges with a simple task, due to being new to web design and system administration. My boss requested two phone numbers instead of one in the top box, and I need them aligned while keeping the "free estimate" button in p ...

csshtmltextindentation

Having difficulty with printing a particular div

I need help with printing a specific div containing checkboxes using jQuery. The checkboxes are initially checked based on data from a database, but when I try to print the div, the checkboxes remain unchecked in the print view. Below is the code snippet ...

javascripthtmlcsscheckboxprinting

What is the most creative way you can think of to create a CSS/JS animated

Is using an animated SVG the best way to create these wavy blobs for mobile compatibility? What approach would you take? Here is a similar example I found var wave = document.createElement("div"); wave.className += " wave"; docFrag.appendChil ...

javascriptjquerycssanimation