Adjusting the screen width to activate a responsive nav bar with a centered title

I'm facing an issue with the alignment of the heading within a navigation bar, causing the links to wrap before the collapse of the nav-bar occurs -

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

I am trying to make the links collapse earlier than they currently do. Despite going through all the solutions provided to this problem, I have not been able to find a suitable answer. Below is my latest attempt. I thought adjusting the width of the custom header using a media query might solve the problem, but it didn't work. Currently, when the links collapse, the hamburger icon is also positioned to the left of the centered text. I will address that later on.

<nav class="navbar navbar-expand-xl navbar-light bground">
            <a class="navbar-brand" href="#"> NavBar Testing </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#colNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="customHead">
                <text>Centered horizontally and vertically</text>
             </div> 

            <div class="collapse navbar-collapse" id="colNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#"> Services </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"> About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"> Contact Us </a>
                    </li>
                </ul> 
            </div>
        </nav>
.navbar-collapse {
    background-color: red;
    float: right;
    width: 25%;
}

.navbar-nav,  .nav-link{
    background-color: yellow;
    color: red !important;    
}

.customHead {
    width: 100%;
    position: relative;
    background: red;
  }
  
  text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -130%);
    background: orange;
    margin-top: 10px;
  }

  @media only screen and (max-width: 1200px) {
    .customHead {
        width: 80%;
    }
    .navbar-toggler {
        background-color: red;
        float: right;
    }
  }

Answer №1

It's difficult to determine the exact CSS without seeing the complete code, but one possible solution could be:

<!DOCTYPE html>
<html lang="en>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .flex {
        flex: 1;
        display: flex;
      }

      .horizontal-center {
        justify-content: center;
      }

      .horizontal-end {
        justify-content: flex-end;
      }

      .vertical-center {
        align-items: center;
      }

      .navbar-nav {
        display: flex;
      }

      .nav-link{
          background-color: yellow;
          color: red !important;
          margin-left: 10px;
      }

      li {
        list-style: none;
      }
    </style>
  </head>
  <body>
    <nav class="flex">
      <div class="flex vertical-center">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#colNav">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#"> NavBar Testing </a>
      </div>

      <div class="flex vertical-center horizontal-center">
        <text>Centered horizontally and vertically</text>
      </div>

      <div class="flex horizontal-end vertical-center">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#"> Services </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"> About Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"> Contact Us </a>
            </li>
          </ul>
      </div>
    </nav>
  </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

Is it possible to use v-if in conjunction with a style tag to specify a different source file? Alternatively, is there a more efficient method I

I attempted the example provided below, but unfortunately, it did not function as expected. The reason behind my endeavor is that adding numerous modifiers (--tuned) to achieve the desired outcome seemed impractical. Therefore, I decided to try and link ...

A guide to accessing the sibling of each selector with jQuery

Imagine you have the following HTML structure: <div class="parent"> <div class="child"></div> <div class="sibling">content...</div> </div> <div class="parent"> <div class="child"></div> <div ...

Validating the existence of a file through HTTPS in Javascript

After attempting to retrieve the file using this code, I've encountered an issue - it works with HTTP requests but not HTTPS requests (which is what I require). function checkUrl(url) { var request = new XMLHttpRequest(); try { request.ope ...

JavaScript is failing to update the table values as users interact with it

I've created an HTML table and used PHP to populate the values. The goal is to allow users to update order statuses with a status and message input. Initially it works fine, but after multiple uses, it either updates the wrong row or doesn't up ...

Conflicting Transformation Properties Causing CSS Issues Within a Single Element

I'm currently working on a user interface where users can drag and drop a box with a red outline to position it on the screen within a black box. See the UI here Alternatively, users can also move the box by adjusting the inputs on the right side. ...

Updating the Title of a Page in Node.js

Is it possible to dynamically update the title of each page using NodeJS? The index.html file (located inside the public folder) looks like this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel= ...

React Native: Enhance the background with a vibrant stripe of color

I am trying to incorporate a strip of grey in the middle of my white background, but I am encountering an issue where I am unable to input any text inside it. Below is the code snippet I am working with: container: { flex: 1, justifyContent: "cent ...

Responses were buried beneath the inquiries on the frequently asked questions page

My FAQs page is in pure HTML format. The questions are styled with the css class .pageSubtitle, and the answers have two classes: .p1 and .p2. Here's an example: <p class="pageSubtitle">Which Award should I apply for?</p> <p class="p1" ...

How to position preloader at the center in materializeCSS

Given this situation: I attempted to implement this Preloader with position:fixed and centered. My approach was as follows: .loader { position:fixed; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); } <link rel="stylesheet" href="h ...

Rendering images in Next.js version 10

Just recently, Next.js version 10 was launched featuring the latest Image element, making it a great asset for websites that heavily rely on images! When I receive an HTML response from the server, it looks something like this: HTML = "<div> &l ...

Anime.js: Grid layout causing issues with displaying simple text animations

I'm attempting to create a text animation within a grid layout using the anime.js library, but unfortunately, the animation isn't displaying. The project consists of just one HTML file. The JavaScript code: <script> import anime from &ap ...

Theming for Atom and Electron developer tools

After switching from the netbeans IDE to github's atom, I realized that some necessary features were missing. Unable to find a suitable package, I decided to try customizing it myself, gaining valuable insight into the editor in the process. However, ...

What causes the CSS width property to vary when using the display:inline property?

There is a piece of code that contains a <ul> element with the default css property display:block. Here is the code snippet: ul,li{ list-style-type:none; padding:0; /*display:inline;*/ } #parent{ width:100%; /*height:50px;*/ background-color ...

hide the scroll button when at the top of the page and hide it when at the bottom

Looking to create a vertical scroll that hides the up button when at the top and hides the down button when at the bottom? Jquery can help with this, but sometimes it's tricky to get it just right. Take a look at an example here. Below is the code sn ...

Adjust the dimensions of the text area to modify its height and width

Can someone help me adjust the width and height of the <textarea> tag in HTML so that it only has two lines (rows)? Right now, it's only displaying one line. Any suggestions on how to solve this issue? Even when I try changing the width to 1000 ...

Creating a Vue component that generates multiple table rows

I am working on returning two tr elements from a single component called v-design-row. Vue typically requires template elements to be enclosed in a div, but due to the required tag structure of HTML tables, I am unable to wrap them within a div. Whenever I ...

What could be causing my inline-block divs to not line up correctly?

Presented below is the code snippet of my HTML: .classWrap { text-align: center; } .classInd { display: inline-block; height: 200px; width: 200px; margin: 20px; border: 2px solid #FFF202; border-radius: 10%; box-shadow: 0 0 15px 0 #FFF2 ...

Chrome autocomplete behaves as if the input fields are disabled and cannot be clicked on

I am experiencing an unusual issue with autofill in Chrome. After logging in and then logging out of the app, the input fields (email, password) are auto-filled but appear to be frozen and unclickable. This problem does not occur every time; it only happe ...

The autocomplete feature in Codemirror seems to be failing specifically when writing JavaScript code

I am having trouble implementing the autocomplete feature in my JavaScript code editor using Codemirror. Can someone please help me figure out what I'm doing wrong? Here is the snippet of code : var editor = CodeMirror.fromTextArea(myTextarea, { ...