Ensuring the corner link remains at the top when expanding or in mobile mode with mdBootstrap's navbar

I have implemented Material Design Bootstrap on my responsive website.

When viewing the website on a large screen, the navbar at the top displays:

  1. A link to my brand aligned to the left
  2. Two page links
  3. A profile dropdown aligned to the right

Large screen layout:

https://i.sstatic.net/zqfIY.png

The goal is for the layout to adjust when viewed on a smaller device. In this case, the layout should include:

  1. A toggler to expand the menu aligned to the left
  2. My Brand link aligned in the middle
  3. Profile dropdown still aligned to the right

Upon clicking the toggler, the menu with the two page links should expand without affecting the placement of the top navbar elements (toggler, My Brand, Profile).

Desired look on small screen after expansion:

https://i.sstatic.net/2zJXo.png

However, currently when the toggler is clicked, the My Brand link shifts to the right in the navbar and the Profile dropdown is displayed at the end of the expanded menu.

Current behavior (incorrect):

https://i.sstatic.net/UsDD0.png

You can view the live code in the mdbootstrap.com snippet editor here: 

<nav class="navbar navbar-expand-sm navbar-dark indigo">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-top">
  <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand font-weight-bolder" href="#">My Brand</a>
  <div class="collapse navbar-collapse" id="navbar-top">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
  <div>
    <ul class="navbar-nav mr-1 mt-lg-1">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle waves-effect waves-light" id="profile-dropdown"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-user"></i>
        <span>Profile</span>
        </a>
        <div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="profile-dropdown">
          <a class="dropdown-item waves-effect waves-light text-nowrap" href="/account">
          <i class="fas fa-user-cog navbar-profile-icon"></i>
          <span>My account</span>
          </a>
          <a class="dropdown-item waves-effect waves-light text-nowrap" href="/logout">
          <i class="fas fa-sign-out-alt navbar-profile-icon"></i>
          <span>Logout</span>
          </a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Your assistance would be highly appreciated. Thank you!

javascriptcssbootstrap-4mdbootstrap

Answer №1

To center the navbar-brand on a breakpoint of 576px, you would need to use position:absolute. Additionally, at the same breakpoint, you should float your dropdown menu to the right side of the screen.

UPDATE: Due to the questioner's comment, I have updated the code snippet below as the original mdbootstrap snippet in the question is no longer working!

@media screen and (max-width:768px) {
  .fixedNavBarItem {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .navbar-brand {
    position: absolute;
    width: 67%;
    text-align: center;
    margin-left: 15%;
    top: 6px;
  }
}
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.7/css/mdb.min.css" rel="stylesheet">

<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.7/js/mdb.min.js"></script>

<!--Navbar -->
<nav class="mb-1 navbar navbar-expand-md navbar-dark default-color">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-333" aria-controls="navbarSupportedContent-333" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent-333">
    <ul class="navbar-nav mr-auto">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-333" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
          </a>
        <div class="dropdown-menu dropdown-default" aria-labelledby="navbarDropdownMenuLink-333">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>

  </div>
  <ul class="navbar-nav ml-auto nav-flex-icons fixedNavBarItem">
    <!--

  <li class="nav-item">
    <a class="nav-link waves-effect waves-light">
      <i class="fab fa-twitter"></i>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link waves-effect waves-light">
      <i class="fab fa-google-plus-g"></i>
    </a>
  </li>
-->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-333" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-user"></i>
      </a>
      <div class="dropdown-menu dropdown-menu-right dropdown-default" aria-labelledby="navbarDropdownMenuLink-333">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
</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

Specify that a function is adhering to an interface

Is there a way in Typescript to ensure that a function implements a specific interface? For example: import { BrowserEvents, eventHandler, Event } from './browser-events'; export function setup(){ const browserEvents = new BrowserEvents(); b ...

javascripttypescriptfunctiontypes

Error Notification in React Bootstrap - Stay Informed!

When a 401 error is returned from the API, I need to show an error message in the component. My approach involves using an unbound state and ES6. However, I encountered this error: Cannot read property 'setState' of undefined Below is the login ...

javascriptreactjsreact-bootstrap

Concealing the flexslider in Angular when accessing the main URL

I need to hide a div with flexslider in it on the root page using ng-hide. The issue is that the images do not load when navigating to another path. Here is how my index.html is structured: <ul> <li><a href="#/">Root</a> ...

javascriptangularjsflexslider

Angular's method of one-way binding to an object

Seeking a method for one-way (not one time) binding between an attribute on a directive without utilizing attrs.$observe. Currently considering binding via &attr and invoking the variables in the template like {{attr()}}. app.controller('MainCtrl ...

javascriptangularjs

Creating a corner ribbon for a Material UI Card: A step-by-step guide

Can anyone provide pointers on incorporating a corner ribbon to a Material-UI card? Currently, I am utilizing makeStyles for styling from Material UI. ...

javascriptcssreactjsmaterial-ui

List of elements inside an HTML box

In my current HTML project, I am trying to include a box on a webpage that contains a scrollable list of elements. I want the content inside the box to scroll independently without affecting the rest of the page. Is there a way to achieve this? ...

htmlcss

The form fails to submit when the page automatically reloads

I have a PHP web application that requires certain variables on this page to be automatically refreshed. To achieve this, I have moved the processing to another page called "test.php", which is loaded into this div every 10 seconds. <script type="text ...

phpjavascriptjqueryform-submitpage-refresh

Conceal pagination numbers using jquery pagination

I have integrated a jquery function to handle pagination of items on my website. Below is the function code: (function($) { var pagify = { items: {}, container: null, totalPages: 1, perPage: 3, ...

javascripthtmljquerypagination

What is the best way to maintain the current position in a component while interacting with another component?

I have a component that displays a collection of cards with images. There is a button that toggles between showing another component and returning to the original list of cards. The issue I am encountering is that every time I return to the list of cards, ...

javascriptcssreactjs

Having issues with the input event not triggering when the value is modified using jQuery's val() or JavaScript

When a value of an input field is changed programmatically, the expected input and change events do not trigger. Here's an example scenario: var $input = $('#myinput'); $input.on('input', function() { // Perform this action w ...

javascriptjqueryhtmleventsinput

Continuously refreshing the content

Having an issue with the $.ajax() function while trying to load content into a DIV from another page. The content keeps reloading into the element continuously. Observing my debugger, it seems that the element .driving_action_body is constantly reloading ...

jqueryhtmlcssajaxbootstrap-modal

transferring data to and from a secure website

Excuse my confusion, but I am feeling a bit overwhelmed with this situation. My coworkers and I have been working on a project where I developed a website using HTTPS, while another colleague set up a webserver. To access my website, I found that I can typ ...

javascriptajaxhttps

Received an error while attempting an AJAX GET request to a distinct server hosting a WebAPI

This is my first time encountering an issue with an Ajax request in client-side code. I'm hoping that there's a simple mistake in my code that I'm just overlooking. Just to give some background, when I manually access the URL mentioned below ...

javascriptjqueryajaxasp.net-web-api

Fuzzy backdrop with razor-sharp edges

In the process of designing a website, I am in need of a header with a blurred background that retains sharp edges. To achieve this effect, I implemented the use of ::before in my CSS code. Current Outcome: (For full clarity, it may be necessary to view ...

htmlcsscss-filters

How do I go about extracting and presenting the JSON data from the ESPN API?

In my current project, I am trying to utilize the jQuery library to work with API JSON data. Even though I am experienced in parsing JSON in PHP, I want to explore doing it with jQuery this time around. The goal is to extract information about each of the ...

javascriptjqueryhtmljson

Having trouble retrieving values for jVectorMap? The getElementById method doesn't seem to be functioning as

I have been trying to set markers on a jVectormap. I retrieve the content from my database and store it in a hidden input field. The format of the data is as follows: {latLng:[52.5200066,13.404954],name:'Berlin'},{latLng:[53.0792962,8.8016937],n ...

javascriptphpjsongetelementbyidjvectormap

Utilize Angular to simultaneously filter search results by URL and make selections in a dropdown menu

As a newcomer to the Angular JS framework, I have successfully created a client-company table where clients can be filtered by company name using a drop-down menu. However, I am now looking to implement a filtering mechanism based on the URL structure su ...

javascriptjqueryjsonangularjsfrontend

Implementing click event binding with various CSS styles in Angular

Is there a way to attach multiple css classes to the click event of the Submit button in Angular? I want the style to change when the button is clicked. HTML <div class="mainbody" [ngClass]="getStyle"> <button (click)=&quo ...

cssangulartypescriptbindingevent-handling

Issue with Bootstrap 4 list items not displaying in block format

Based on the information from , using li tags as block elements should result in a vertical menu. However, with Bootstrap 4, when I use li tags, the menu stays horizontal on toggle for small devices. Is this the expected behavior? <ul class="nav navb ...

htmltwitter-bootstrapcsstwitter-bootstrap-4bootstrap-4

What is the method to deactivate multiple links using jQuery?

Below is the HTML code: <a title="Login" data-href="/MyAccount/Access/Login" data-title="Admin" data-entity="n/a" id="loginLink" class="nav-button dialogLink"><b>Login</b></a> <a title="Register" data-href="/MyAccou ...

javascriptjquerycss