How to Align Bootstrap 4 Navbar Brand Logo Separate from Navbar Toggler Button

Can anyone help me with center aligning navbar-brand?

When I right align navbar-toggler for mobile devices, it causes the logo to be off-center.

Is there a way to independently align these two classes, and if so, how can I achieve this?

<nav class="navbar navbar-expand-md navbar-light fixed-top" id="mainNav">
    <a href="index.php#page-top" class="navbar-brand mx-auto PElogo">
        <img src="https://www.theharbourhousehotel.co.uk/img/LOGO-HH-PNG.png" alt="Harbour House Hotel Logo" title="Harbour House Hotel">
        <h1>Harbour House Hotel</h1>
        <h2>Portpatrick</h2>
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#HHnavbar" aria-controls="HHnavbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div id="HHnavbar" class="navbar-collapse collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#About">About</a></li>
            <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#Rooms">Rooms</a></li>
        </ul>
    </div>
</nav>

Check out the JS Fiddle for this code: https://jsfiddle.net/nathonjones/va9g03tj/3/

Appreciate any help. Thank you.

javascriptcssbootstrap-4hamburger-menu

Answer №1

When it comes to the toggle button (also known as the burger menu), here are the key measurements:

  • The width of the burger menu is 30px
  • There is a padding of 12px on both the left and right sides
  • A 1px border on the left and right each

By adding up these measurements (30px + 2*(12px) + 2*(1px) = 56px), applying a left padding of 56px can ensure that our brand is always positioned in the central, true middle of the navigation...

See the working code snippet below for reference

.navbar-brand img {
  width: 90px;
}

.PElogo {
  color: #000;
  text-align: center;
  text-transform: uppercase;
  margin-top: 30px;
  padding-left: 56px !important;
}

.PElogo img {
  width: 90px;
}

.PElogo h1 {
  font-size: 1.1rem;
  margin: .5rem 0 0;
}

.PElogo h2 {
  font-size: .675rem;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <nav class="navbar navbar-expand-md navbar-light fixed-top" id="mainNav">
    <a href="index.php#page-top" class="navbar-brand mx-auto PElogo">
      <img src="https://www.theharbourhousehotel.co.uk/img/LOGO-HH-PNG.png" alt="Harbour House Hotel Logo" title="Harbour House Hotel">
      <h1>Harbour House Hotel</h1>
      <h2>Portpatrick</h2>
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#HHnavbar" aria-controls="HHnavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

    <div id="HHnavbar" class="navbar-collapse collapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#About">About</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#Rooms">Rooms</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#Restaurant">Restaurant</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#Attractions">Attractions</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#EventsNewsOffers">News</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#Location">Location</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#Gallery">Gallery</a></li>
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="contact-harbour-house-hotel.php">Contact</a></li>
      </ul>
    </div>
  </nav>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>

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

How can I ensure that I am only retrieving the first object within a "for loop" in vuejs and returning its value without getting the rest?

Why am I only able to retrieve the value of the first object in my "for loop" and not all three values as intended? var app = new Vue({ el: '#app', data: { myObj: [ {name: 'Hello', age: 10}, {name: ...

javascripthtmlfor-loopvue.js

Maintain query parameters in Angular6 while routing with canActivate

When using Auth guard to verify login status and redirecting to the login page if a user is not logged in, there seems to be an issue with losing all query parameters during the redirection process. I attempted to preserve the query params by adding { qu ...

javascriptangularangular6angular-routing

elimination of nonexistent object

How can I prevent releasing data if two attributes are empty? const fork = [ { from: 'client', msg: null, for: null }, { from: 'client', msg: '2222222222222', for: null }, { from: 'server', msg: 'wqqqqqqqq ...

javascriptarraystypescriptobject

Tips for handling a disabled button feature in Python Selenium automation

When trying to click this button: <button id="btn-login-5" type="button" class="m-1 btn btn-warning" disabled="">Update</button> I need to remove the disable attribute to make the button clickable. This ...

javascriptpythonseleniumwebdriverwaitdisable

Find the value of a JavaScript string variable using an alternative name

My latest JavaScript function is designed to fetch JSON data from either a server or local files on any browser. This piece of code processes JSON from two sources: an XMLHttpRequest response, or a variable imported via script. In the case of the latter, ...

javascriptjsonglobal-variablesevalalias

Utilizing jQuery to submit the form

After clicking the search icon, it displays an alert with the message ok, but not h. Based on the code snippet below, it is intended to display alerts for both ok and h. <?php if(isset($_POST['search'])){ echo "<script type='text/ ...

javascriptjqueryclick

The jQuery extension for XDomainRequest in the $.ajax function called onprogress is

Summary: I am trying to make this compatible with this: Detailed Explanation: My goal is to develop a jQuery extension that introduces a progress method to the $.ajax object and works seamlessly with IE8 & IE9's XDomainRequest object. Currently, I ...

javascriptjqueryxdomainrequest

Retrieve the value of a tag attribute while the tab is in the active state

Is there a way to extract the value from a specific tag when it is set as active? The tag in question looks like this: <li class="top-tab" role="tab" tabindex="0" aria-selected="true" aria-expanded="true"> TITLE OF SECTION </li> I am interes ...

javascripthtmlfunctionattributestags

Adjust the CSS to give <a> elements the appearance of plain text

Is it possible to style an anchor tag to appear identical to plain text? Consider the following scenario: <p> Here is some text and here is a <a class='no-link' href="http://www.example.com" >link</a></p> I have atte ...

htmlcss

Create a new array containing the keys from an array of objects

My task involves extracting the key puppies from an array of objects and returning it in a new array: The input is an array of dogs structured like this: [ {breed: 'Labrador', puppies: ['Fluffy', 'Doggo', 'Floof&ap ...

javascriptarraysjavascript-objects

Having trouble scrolling to the top in Flickr Search using AngularJS, the results are restricting my movement

I recently followed a tutorial on creating a Flickr Search App with AngularJS (https://www.youtube.com/watch?v=lvGAgul5QT4). I managed to show the search results on my page, but encountered an issue: I couldn't scroll all the way back up to the search ...

javascripthtmlcssangularjsflickr

Utilizing setColumns() function within Google Charts for JSON data tables

Is there a feature in the Google Charts API that functions similar to setColumns() for working with JSON data? I'm aiming to reduce PHP calls by consolidating my data into a single array and then specifying which columns Google Charts should utilize. ...

javascriptphpjsongoogle-visualization

What sets apart `npm install --save-dev gulp-uglify` from `npm install gulp-uglify`?

I'm feeling perplexed regarding the npm installation process. Based on what I've gathered, there are several options available to me when installing modules: The -g option which saves modules globally --save-dev No arguments. Could someone cl ...

javascriptnpm

Strategizing button placement for maximum profit expansion

I am attempting to design a budget board using Bootstrap 4. Here is what I have done so far, and I want the buttons to look like the image below. I'm clueless on how to achieve this.. Current Output: Desired Output: .btn-warning { border: 1px s ...

cssbootstrap-4

The npm system is encountering difficulties in parsing the package.json file

Having recently started using npm and node, I decided to create a react app with truffle unbox react using npm init react-app. Despite attempting to reinstall npm and clear the cache multiple times, I consistently encounter an error when trying to run sudo ...

javascriptjsonnpmtruffle

Tree Grid in jqGrid with Offline Data

Accessing the jqGrid documentation for tree grid, I discovered the following information: "At present, jqGrid can only interact with data that is returned from a server. However, there are some tips and resources available that explain how to work w ...

javascriptjqueryjqgrid

The provider for authentication, which is linked to the AuthenticationService and subsequently to the loginControl, is currently unidentified

Attempting to implement an authentication service in my application, I encountered an error when trying to call it within my controller: !JavaScript ERROR: [$injector:unpr] Unknown provider: AuthenticationServiceProvider <- AuthenticationService <- ...

javascriptangularjs

What is the best way to locate a table of a specific class using jQuery selectors?

Is there a way to specifically target a table with the class "d" using jQuery selectors? I'm having trouble making it work... var dTableTags = $(".d table"); For instance, an example table would look like this... <table id="thetable" class="d"&g ...

javascriptjquery

Utilizing JQuery UI autocomplete for dynamically loaded textbox using AJAX

<div id='toolbox'> <div class='placeholder'></div> </div> In my project, I am using a click event to dynamically load a text box into the placeholder. $('#toolbox .placeholder').load('http:// ...

javascriptjqueryajaxjquery-uiautocomplete

How can we show pictures when a user clicks?

After creating a model for displaying images in a modal when clicked by the user, I encountered an issue. Whenever I try to access the images from the gallery within the modal content, it only displays a blank popup. I want the pictures from the image gall ...

javascripthtmlcssmodal-dialogshopify