Show Navbar Toggler only when in Portrait mode on mobile devices, not Landscape mode

Attempting to create a responsive website utilizing Bootstrap 4, I encountered a problem with the menu expanding in Landscape orientation on mobile devices, causing distortion. How can I ensure the menu stays collapsed in Landscape orientation?

Despite having already completed 90% of the page, I realized the issue and tried various solutions like creating both a menu collapsed and expanded by default, then hiding one based on media queries. However, this approach ended up breaking the menu entirely. Additionally, attempting to modify the Bootstrap media queries in my own mobile.css file or web inspector failed, as any overrides were ignored. My setup includes using bootstrap css, mobile.css for media queries, and design.css for custom styles. Visit the Website to see the issue firsthand: lightflashproductions.com

cssbootstrap-4

Answer №1

Within your navigation menu, the class navbar-expand-sm is currently being utilized...

  • If you switch it to navbar-expand-md, the full view (without the burger menu) will appear on screen resolutions larger than 768px

  • Opting for navbar-expand-lg will ensure that the full view (excluding the burger menu) is displayed on resolutions exceeding 992px

  • Using navbar-expand-xl means that the full view (again, minus the burger menu) will be shown on resolutions over 1200px

  • You can determine the appropriate class based on your phone's resolution in landscape mode

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-xl bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>
<br>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>

For further details, click here

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

When resizing the browser, the divs stack neatly without overlapping

We need to ensure that the 4 divs stack on top of each other without overlapping! The header should have the same width as the footer, 100% The menu should stack with the header and footer The content should be centered on the page and stack with the oth ...

htmlcssoverlapping

Unable to remove both top and bottom drop shadows

Even after using the code below, I am still unable to remove the small drop shadows at the top and bottom. How can I get rid of them completely? div#inner_container { width: 960px; margin: 0 auto; background-color: rgb(255, 255, 255); box-shadow:0 9 ...

htmlcssdropshadowdrop-shadow

The parent and child elements both attempted to define the background color, but neither was successful in applying it

Here is the html code snippet: body { font-family: Arial, Helvetica, sans-serif; } header { background-color: rgb(93, 43, 78); background-image: -webkit-linear-gradient(right, rgb(93, 43, 78 ...

htmlcssbackground-imagebackground-color

What steps should be taken to correct the misalignment of the closing x symbol in the alert box?

After making adjustments to the line height, the closing x mark on the right now aligns closer to the bottom of the alert message box. I am currently utilizing Bootstrap version 5.0.1. Is there a way for me to vertically center the x mark? Thank you. CSS: ...

htmlcsstwitter-bootstrapbootstrap-5

Clear out any unnecessary white space beneath the content on your webpage

I am relatively new to Web Development and currently following Colt Steele's udemy course. I have been working on a landing page, but as I try to set the height of HTML to 100%, it leaves whitespace at the bottom. After some research, I suspect that t ...

htmlcssbootstrap-4

Implementing Sass mixin transition to specifically add transition-delay - a comprehensive guide

As I continue to enhance my front-end development skills and practice Sass to optimize my CSS code, I encountered a roadblock. After exploring resources and tutorials online, I created a global mixin in Sass named 'transition'. Here is the code: ...

csssasscss-transitions

Top tips for resolving Swiper Js initial loading issues in a Carousel!

After implementing swiper js from , I encountered an issue. The initial loading displays only a single carousel item before the rest start appearing, creating a glitchy effect. To clarify, when the website is loaded, only the first item is visible in the ...

javascriptcsswordpressswiper.js

What is the best way to create a sliding menu that appears from the right side on a mobile device using HTML, CSS, and JQuery

Is there a way to have the menu slide in smoothly from the right side after clicking on the menu bar icon, including sliding the menu bar icon itself? The current code displays the menu directly upon clicking on the menu bar, but I would like it to slide i ...

javascriptjqueryhtmlcssmenu

Utilize multiple classes in inline styling within HTML

I'm trying to dynamically apply the "more" CSS class directly to an inline style tag, but I haven't had success with my current approach. Unfortunately, in my situation, I can't create a class. The method is working for <p> tags but no ...

javascriptjqueryhtmlcss

Highlight the active menu item using jQuery

Check out my menu example here: http://jsfiddle.net/hu5x3hL1/3/ Here is the HTML code: <ul id="menu" class="sidebar"> <li> <a href="#" class="clickme">Menu</a> <ul id="menu1"> <li><a class="dropdown-clas ...

javascriptjqueryhtmlcss

Are the dimensions of <TD> and <table> not displaying properly?

I've encountered a peculiar issue that I need help with. Here is the Fiddle link: http://jsfiddle.net/H3W4X/ If you want to view it in fullscreen: http://jsfiddle.net/H3W4X/embedded/result/ This is the code snippet causing trouble: <div id="wor ...

jquerycsshtml-table

Is it possible to utilize LESS to dynamically read the width?

My LESS code looks like this: &.settings-prompt .panel { margin-left: -190px; width: 380px; height: 200px; } &.create-playlist-prompt .panel { margin-left: -165px; width: 330px; height: 180px; } I want the .panel to have ...

cssless

What is the best way to customize the appearance of Image tags located inside SVGs, whether they are in separate files or embedded within the code

I am developing a custom SVG editor application and facing an issue with implementing a highlighted effect when an <image> element is clicked. I have successfully accomplished this for other elements like <circle> by adjusting attributes such a ...

javascripthtmlcsssvgsnap.svg

Incorporating a CSS stylesheet into the theme settings of the Stratus 2 Beta platform

I have been attempting to personalize my Stratus 2 Beta by implementing a custom theme. I created a separate CSS file named "stratus.css" and stored it in the CSS directory of my website - with the CSS code being identical to this example. Below is my Jav ...

javascripthtmlcssthemessoundcloud-stratus

Is it possible to drag the parent element but only select the text within the child

How can I make the parent div draggable, yet keep the text in the child span selectable? <aside draggable="true" id="dragme"> This is an aside, drag me. <span id="copyme" draggable="false">But copy me!</span> </aside> A simila ...

javascriptcsshtmldraggable

Unique CSS animation effect for mouse hover interaction

I am working with a set of buttons that have an animation named "slideIn". The keyframes for this animation are as follows: @keyframes slideIn { 0% {opacity: 0; transform: translate(-200px);} 100% {opacity: 1; padding-left: 110px; w ...

cssanimationhover

jQuery's AJAX feature fails to identify the newly modified div classes

For my new website, I am developing a simple checklist feature. To handle the check and uncheck requests from users, I'm using jQuery's $.ajax() function. Whenever a user clicks on the check or uncheck buttons, jQuery retrieves the validation tok ...

javascriptjqueryhtmlcssajax

Animate the jQuery: Move the image up and down inside a smaller height container with hidden overflow

Check out the fiddle to see the animation in action! The image is programmed to ascend until its bottom aligns with the bottom of the div, and then descend until its top aligns with the top edge of its parent div, revealing the image in the process. ...

javascriptjqueryhtmlcss

A linear gradient effect originating from the center/middle of the background

Is it possible to create a linear-gradient background that starts from the center or middle of the screen? This is the CSS I am currently using: body { display: table; width: 100%; height: 100%; margin: 0 auto; background-repeat: no-r ...

htmlcssbackgroundlinear-gradients

Connect to dynamically generated div on separate page

I am facing an issue with my navigation bar drop down menu that displays event titles fetched from the database. I want users to be able to click on a specific event and have the page scroll to the dynamically generated content for that event. However, it ...

javascriptjqueryhtmlcssajax