The collapsible menu in Bootstrap features a two-row design

Question

The collapsible menu in Bootstrap features a two-row design

I am currently in the process of developing a website called torgoborudovanie.com

One issue I have encountered is with the collapsing navbar that I built using Bootstrap. When I attempt to resize the window, it ends up looking like this: https://i.sstatic.net/iyzTw.png

Upon resizing further, the navbar displays as two lines, which appears odd (particularly on iPhones and iPads). However, after slightly more resizing, it collapses just as intended: https://i.sstatic.net/HD7ze.png

If you're interested in examining the code, feel free to inspect the HTML code within developer tools instead of me cluttering this post with unnecessary details. However, I'm happy to share the code here if needed! =)

html css twitter-bootstrap twitter-bootstrap-3 navbar

Answer 1

Answer №1

After trying various solutions, I came up with a workaround that is not ideal but gets the job done. When the page loads and the window width is less than 1200px, I simply hide the lengthy text section.

function concealText() {
    if($(window).width() < 1200) {$('.text-section').hide()} 
};
concealText();

Answer 2

After trying various solutions, I came up with a workaround that is not ideal but gets the job done. When the page loads and the window width is less than 1200px, I simply hide the lengthy text section.

function concealText() {
    if($(window).width() < 1200) {$('.text-section').hide()} 
};
concealText();

Answer 3

Answer №2

Check out the CSS rules that start at the MOBILE NAV comment; you can customize these rules to adjust the collapse of the navbar at different breakpoints.

Additionally, there is an extra broken list tag in the navigation and placing Trustworthy Partner - Quality Solutions! inside your navbar-collapse div will result in the following behavior:

If you expand the menu on mobile and then resize the viewport, your navbar will revert to line-height: 60px unless the browser is refreshed. It may seem insignificant, but since you are looking to change the collapse breakpoint, it's important to mention.

**I have also grouped the inline styles with the rest of the CSS Rules.

Answer 4

Check out the CSS rules that start at the MOBILE NAV comment; you can customize these rules to adjust the collapse of the navbar at different breakpoints.

Additionally, there is an extra broken list tag in the navigation and placing Trustworthy Partner - Quality Solutions! inside your navbar-collapse div will result in the following behavior:

If you expand the menu on mobile and then resize the viewport, your navbar will revert to line-height: 60px unless the browser is refreshed. It may seem insignificant, but since you are looking to change the collapse breakpoint, it's important to mention.

**I have also grouped the inline styles with the rest of the CSS Rules.

Answer 5

Answer №3

If you want the navbar to change when it collapses, you'll need to adjust your breakpoint. Here's an example that should work:

@media only screen and (min-width: 1200px) {
    .collapse {
        display: block;
    }
    .navbar-toggle {
        display: none;
    }
}

@media only screen and (max-width: 1200px) {
     .collapse {
          display: none;
      }
      .navbar-toggle {
         display: block;
      }
}

This setup will cause the navbar to float after reaching a width of 1200px.

** Apologies for my mistake earlier. Please give it a try now :) **

Answer 6

If you want the navbar to change when it collapses, you'll need to adjust your breakpoint. Here's an example that should work:

@media only screen and (min-width: 1200px) {
    .collapse {
        display: block;
    }
    .navbar-toggle {
        display: none;
    }
}

@media only screen and (max-width: 1200px) {
     .collapse {
          display: none;
      }
      .navbar-toggle {
         display: block;
      }
}

This setup will cause the navbar to float after reaching a width of 1200px.

** Apologies for my mistake earlier. Please give it a try now :) **

The collapsible menu in Bootstrap features a two-row design

Answer №1

Answer №2

Answer №3

Similar questions

Determining the quantity of items within a div using jQuery

"Key challenges arise when attempting to execute the node app.js script through the terminal due to various middleware compatibility

Is there a way to prevent text from being automatically linked after using an <a> tag?

Restricting the height of a column in Bootstrap 4 to create a more compact design

Opening a window using Javascript with a PHP Ajax response

Get a calendar that displays only the month and year

HTML Backup Page

I have successfully implemented a click effect on one image and now I wish to apply the same effect to the remaining images

"Is there a way to reverse the action of $( "button" ).remove()

How can I align a button right next to the table row data in HTML using Bootstrap?

Can the order of event bubbling be altered in JavaScript?

Tips for accurately placing a border on an active link using active_link_to in Rails 4

What is the method for inserting a gap between Bootstrap card components?

Guide on coding in Node.js to showcase an image on a web browser

When using jQuery, hover over an li element while ignoring its children

Ways to include text beneath an image within a column using Bootstrap HTML code

Issue with margins of sections when attempting to activate menu class while scrolling

Prevent IonContent from scrolling to the bottom or top when using Ionic framework

Ensure that the content remains at the center of the screen, but is dynamic and changes

Paste the input text into the div element