Hello everyone, I have a quick and specific question. Currently, I have created a custom navbar (see image below). However, I want this navbar to be deactivated when the screen size is too small and instead show a regular navbar at the top. Is it achievable using Bootstrap?
Image of my current custom navbar (on the left): https://i.sstatic.net/F66tI.png
Best regards
If you need a layout that responds well to different screen sizes, consider using Bootstrap's responsive layout feature: https://getbootstrap.com/docs/4.0/layout/overview/
For your specific case, you can display a sidebar on large devices and hide it on smaller ones like this:
<div class='yourLargeNavbar'> ... </div>
<div class='yourSmallNavbar'> ... </div>
Then, with CSS styling, you can control the visibility of these elements based on screen width:
// For small devices (less than 768px)
@media (max-width: 767.98px) {
.yourLargeNavbar{
display:none;
}
.yourSmallNavbar{
display:block;
}
}
@media (min-width: 767.98px) {
.yourLargeNavbar{
display:block;
}
.yourSmallNavbar{
display:none;
}
}
This setup ensures that the appropriate navbar is shown based on the screen size.
Bootstrap provides examples and components, such as the navbar component, that are designed to be responsive: https://getbootstrap.com/docs/4.0/components/navbar/
Update: Make sure to check and modify the code snippet provided in the post for better functionality.
You may also refer to this link for a working example: https://codepen.io/jpaulet/pen/xxEprGB
While working on a custom Wordpress theme, I encountered an issue where the entire body of the page was slightly pushed down. Using Chrome's inspector tool, I identified the following problematic styles: <style type="text/css" media="screen> ...
Creating an image map can be a tedious task, especially when dealing with complex shapes that require pinpoint accuracy. Is there a tool available that simplifies the process by allowing easy plotting of points for mapping? ...
Currently, I am facing a challenge in writing the calcTotal function as I am uncertain about how to distinguish between the selected pizza and the quantity of pizzas requested. My goal is to assign specific prices to each type of pizza (Cheese $6, Pepperon ...
I need to print a table and two popup windows when an action is triggered, but I am facing issues with the page-break in CSS. None of the solutions I have attempted so far seem to work. Currently, the two pop-up windows overlap with the table data, and I w ...
I am trying to create a table with vertical scrolling for the entire table content. Additionally, I need two columns within the table to be scrollable horizontally, but the horizontal scrollbars disappear when the vertical scrollbar is present. How can I k ...
I am struggling with positioning a NextJS Image component within a Material UI Box component. The image is currently centered width-wise, causing alignment issues with the padding of the navigation bar. How can I adjust the positioning to have the image al ...
My goal is to style tables pulled from my database so that the columns in the rows align with the column names for better readability. I attempted to use PHP to achieve this by creating a table outside a while loop to display the names and then starting t ...
How can I adjust the positioning of these two arrow indicators to be aligned with the left and right edges of the screen, regardless of size? .arrow-container { position: absolute; top: 37%; width: 95%; display: grid; grid-template-columns: 10 ...
How can I transfer a default value from HTML to TypeScript using reactive forms? <ul class="list list_2"> <li>Subtotal <span>{{cartTotal | currency:'INR':true:'2.0'}}</span></li> <li>Shippin ...
I am interested in creating a webpage that displays cookies from external websites. I believe PHP would be the most suitable option. How can I retrieve a cookie value from a site such as Facebook? My understanding of PHP is quite limited. When examining ...
I'm working on an email submission form that displays a confirmation message below the input field when a user submits their email address. The confirmation text should fade out after 5 seconds. Here's the code snippet: <div class="input-gro ...
After creating a navbar menu using Bootstrap 4, I noticed that all the elements are appearing too close together, without any space between them. It should display as "Element Element Element Element Element," but instead, it's showing up as " ...
Hopefully, my description of a "nested div" was accurate. My current situation involves an image within a div structured like this: content -> content-inner -> column_left I'm struggling to start the image at 0 px (the extreme left side of th ...
Currently, I am attempting to achieve the floating label effect on Contact Form 7 and have encountered an issue. Although I have successfully implemented the label effect on input:focus, I am struggling to make it persist once text has been entered and foc ...
Let me start by explaining my current issue and dilemma: I have been tasked with converting an existing JS project into a Vue.js framework. While I could easily solve a particular problem using jQuery, it seems to be posing quite a challenge when it comes ...
After clicking the save button to output my form data to a file, I noticed that the saved file has no formatting at all. https://i.sstatic.net/fbqJI.png https://i.sstatic.net/ZcnP0.png I'm encountering an issue where the saved log file lacks any for ...
Whenever I reload the page, the numbering in the li elements seems to shift towards the bottom-right only in IE9, while it displays correctly on other browsers like Firefox and Chrome. Should I implement a specific fix for IE or have I made an error in my ...
Currently, the scrollbar is functioning properly in Chrome and Safari, but in Mozilla, it is not behaving as expected. Below, you can find my code. Although using jquery or JavaScript would be a quick solution, I am exploring CSS options first. ::-webki ...
I am currently working with an HTML5 element: <input class="form-control" #semana="ngModel" name="semana" [(ngModel)]="detalle.semana" type="week"> When I retrieve the value, it comes in the format of a string such as "2018-W23". I am looking to co ...
Currently, I am utilizing a basic modal window which was constructed from Bootstrap's (4.4) sample. This modal consists of a header division: <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button ty ...