The height of the navbar increases when viewed on mobile devices

I'm currently working on a web app where the navigation bar's height unexpectedly changes on mobile view, doubling in size. Here's how it normally appears:

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

And here is the enlarged version on mobile:

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

I'm seeking advice on how to prevent this resizing issue. Is there a way to make the header and logo adapt responsively to different screen sizes? Below is the code snippet I've enclosed:

.navbar {
    background-color: #951010;
    padding-top: 1em;
    padding-bottom: 1em;
}

.navbar-brand {
    color: #FFF;
    font-size: 2em;
}

.navbar-default .navbar-nav>li>a {
    color: #FFF;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Footer Pen</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="/stylesheets/main.css">
        <script src="https://kit.fontawesome.com/175e0bfa97.js" crossorigin="anonymous"></script>
  </head>
<body>
     <nav class="navbar navbar-expand-md navbar-dark fixed-top shadow mb-3">
        <a class="navbar-brand" href="/"><i class="fas fa-dna"></i> cyclone <strong>analytics</strong></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <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="#">Players</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Seasons</a>
                </li>
            </ul>
       </div>
  </nav>


         <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9a9b6a9a9bcabf7b3aa99e8f7e8eff7e9">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

Can anyone point out what might be causing this issue?

htmlcssbootstrap-4

Answer №1

Implement media queries in Bootstrap to manage Responsive breakpoints

.navbar {
  background-color: #951010;
  padding-top: 1em;
  padding-bottom: 1em;
}

.navbar-brand {
  color: #FFF;
  font-size: 2em;
}

.navbar-default .navbar-nav>li>a {
  color: #FFF;
}

@media (min-width: 100px) and (max-width: 400px) {
  .navbar-brand {
    font-size: 1em;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Customized Footer</title>
  <!-- Necessary meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="/stylesheets/main.css">
  <script src="https://kit.fontawesome.com/175e0bfa97.js" crossorigin="anonymous"></script>
</head>

<body>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top shadow mb-3">
    <a class="navbar-brand" href="/"><i class="fas fa-dna"></i> cyclone <strong>analytics</strong></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <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="#">Players</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Seasons</a>
        </li>
      </ul>
    </div>
  </nav>


  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfcfd0cfcfdacd91d5ccff8e918e89918f">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

Answer №2

To ensure the 'cyclone analytics' text is visible on smaller devices without enlarging the nav bar, you should include a media query to adjust the font size. The reason for the nav bar expansion is due to the hamburger icon moving onto a new line.

You can achieve this by implementing a media query similar to the following:

@media only screen and (max width: 700px) {

.navbar-brand: font-size: 1rem;

}

This will prevent the hamburger icon from wrapping onto a new line as the main logo will be scaled down. I hope this solution works for you! :-)

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

A step-by-step guide to extracting data from a table's column, saving it to an array, and then displaying the array's contents

My objective is to accomplish the following tasks: Extract the data from a specific column Transfer this data into an array using PHP Display each value with a line break between them This is the code I have put together: <?php $connection = mysqli ...

phphtmlmysqlarrays

Using `overflow-x: scroll` within a fixed container inhibits the ability to scroll vertically on iOS devices

It appears that a div with horizontal scroll inside a div positioned fixed is causing an issue with vertical scrolling on iOS. When attempting to scroll vertically by placing my finger on the horizontal-scrolling div, nothing happens. The problem does not ...

htmlioscss

What is the best way to shift an image within a div using CSS?

I am currently facing a challenge with moving an image inside a div element. I need to adjust the image by 50 pixels down and 50 pixels left, but I'm having difficulty figuring out how to do this in CSS. I am struggling to find the correct code to con ...

htmlcss

What's the best way to set a specific default value for a numeric slider that isn't arbitrary?

My numeric slider code allows me to set minimum and maximum values, but I'm struggling to specify a specific default value when the page loads. Although I can provide a random value, I want the default value to be fixed like using the attribute value= ...

htmlangularjs

After receiving a response from an Ajax call, the forms are reloaded

Experimenting with servlet calls through Ajax functionality using a simple program. A form consisting of a text box and a div with some text. The program takes input from the user, replaces the text inside the div tag. The form looks like this: <form& ...

jqueryhtmlajax

Issues arise when attempting to center objects within the navbar-nav while in mobile view (collapsed)

After some tweaking with the CSS code provided below, I successfully centered the navbar-nav content within my navbar. Below is the CSS code used: /* @media (min-width:768px) { */ Note this comment .navbar > .container { text-align: center; } .na ...

cssdrop-down-menuformattingtwitter-bootstrap-3scrollbar

What is the process for connecting an HTML page to a CSS file located in a parent directory?

Here's the problem I'm facing: I recently encountered some organizational issues with my website, so I decided to reorganize my files for better classification. The current folder structure looks like this: www resources images ... css de ...

htmlcssdirectory

Is there a way to redirect components within a different component without altering the URL?

Imagine you have an Angular 5 project with routings, such as /home, /landing-page, etc. Let's say your landing page has the URL localhost:4200. On this page, you want to create a login panel with fields for username and password, a sign in button, and ...

htmlangulartypescriptroutesbootstrap-4

Ensure that the display is set to block to stack the input elements on top of each other

I am attempting to grasp the functionality of CSS display property and experimented with this basic HTML code: <div> <form className="container" action=""> <input name="fName" placeholder="First Name" type="text" value={props.fNam ...

htmlcss

Integrate JavaScript with WordPress

How can I get this functioning properly within Wordpress? I have been attempting to connect everything together, but it doesn't appear to be working. Is this the correct way to do it, or am I overlooking something? <script type="text/javascript" s ...

phphtmlcsswordpresscontent-management-system

What is the best way to utilize a template within a select dropdown?

Utilizing Knockout.js, I've successfully created a pseudo-select list with the following code: <div style="width:325px;height:500px;overflow:auto;" data-bind="template: { name: 'group-tmpl', foreach: explorer().categoryData }"></di ...

javascriptjqueryhtmlcssknockout.js

What is the best way to conceal part of a chart or a div in Angular?

I have a large chart that I need to showcase on my website, but due to its size it would take up too much vertical space and potentially overwhelm the user upon their first visit. My goal is to provide a preview of the chart, similar to an excerpt of text ...

htmlcssangularchart.js

Step-by-step guide on incrementally counting localStorage items using jQuery

After spending an excessive amount of time on this project, I have hit a roadblock. Despite days of testing, I am unable to achieve my desired outcome. I am developing an image voting system that will track votes in localStorage. Since this is within Word ...

javascriptjqueryhtmlcsswordpress

Changing icons in a jQuery list

Having an issue with a multi-tiered drop-down list where clicking on a second tier child changes the icons of both children. Here is a complete setup on this fiddle : http://jsfiddle.net/Gwbfd/3/ $(document).ready(function(){ $('.drawer').hide( ...

jquerylistdynamichtml

Unable to retrieve field values from Firestore if they are numeric rather than strings

I need to display this information in a list format: li.setAttribute('data-id', updatesArgument.id);//'id' here unique id Example 1 name.textContent = updatesArgument.data().count;// Works if String Example 2 let i=1; nam ...

javascripthtmlfirebasegoogle-cloud-firestore

What strategies can be implemented to enhance accessibility for custom table behavior?

Our team is currently working on a customized web application for a client's specific needs regarding data tables. The requested functionality includes the ability to sort table columns by clicking on the header, which has already been successfully im ...

htmlhtml-tableaccessibilitywcagwcag2.0

Utilizing Bootstrap 4 with Angular 2 CLI

Currently, I am delving into the world of Angular2 CLI on my local server at http://localhost:4200/. Following the tutorial from , I have successfully installed Angular2. However, I encountered an issue while trying to import Bootstrap4 CSS. I attempted t ...

javascripthtmlcssangularbootstrap-4

Trouble with event.preventDefault() on hyperlinks failing to work

I have searched through numerous topics on Stack Overflow regarding this issue, but none of the suggestions have been able to solve my problem. My specific challenge involves a list of div elements, each containing a hyperlink and a hidden span element wh ...

javascripthtmljqueryevent-handlingjquery-events

The back button in Firefox fails to retrieve a page from the browsing history, showing a "Document Expired" message

I am using an asp.net webform application to display a list of blogs with paging functionality. To ensure a seamless user experience, I have implemented an UpdatePanel so that users can navigate through the blog list without leaving the page. However, in ...

javascripthtmlasp.net

Guiding you to choose a specific child class by identifying its parent class in CSS and jQuery

Hey there! I'm currently working on a website that allows users to post content. I want to ensure that the site is mobile-friendly, so I need to make some adjustments with media queries. Unfortunately, I've run into an issue where media query CS ...

jquerycssclassmedia-queriesparent