Enhanced Bootstrap 4 Navigation Bar Lofty on Tablet Display with Divided Functionality

Currently, I am utilizing Bootstrap 4 for my personal website; however, I have encountered an issue on my tablet where the top menu is divided into two lines:

  • The top row displays the "font awesome" icon
  • Directly below each icon are the section names corresponding to the font awesome icons.

https://i.sstatic.net/4CStg.jpg

Is there a way to maintain the display as it appears on my computer screen or perhaps transition it to a three-line menu instead of splitting into two lines? I would like the menu to occupy a maximum height similar to what is shown on my computer.

You can find the website here

I envision the tablet version displaying a three-line menu accessed by clicking on the top left corner, with the top right corner reserved for the "search" and search submit button.

javascriptcssbootstrap-4font-awesomenav

Answer №1

It can be challenging to create navigations with a lot of content, but I believe the best way to achieve what you're looking for is by implementing the following navigation structure:

(1) If you have a large number of elements and wish to have a '3 line menu' (also known as a burger or hamburger menu) on a tablet, you can use the navbar-expand-xl property. This property indicates that the menu should transition from "burger mode" to "expanded mode" when the device resolution reaches 1200px. You can apply this change to your navigation element like so:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">

(2) Once the menu expands, each element will display with 3 lines - an icon followed by its name underneath. You can style this layout using the following CSS:

.navbar-expand-xl .navbar-nav { display: -webkit-inline-box; }

To further ensure that all elements are displayed on one line, you may need to set this property for various screen sizes (if you haven't implemented point #1 from my response): 

.navbar-expand-lg .navbar-nav { display: -webkit-inline-box; }
/* or */
.navbar-expand-md .navbar-nav { display: -webkit-inline-box; }

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

Designing a personalized confirmation pop-up following the submission of an AJAX form

I am currently utilizing the AJAX JQuery validation plugin to submit a form. Below is a snippet of the code: $(document).ready(function(){ $("#myform").validate({ debug: false, rules: { fname: {required: true}, sname: {required: t ...

phpjavascriptjquerycssajax

unable to access the object3D within the current scene

Currently facing an issue where I am unable to retrieve Object3D from the scene, despite the mesh objects being displayed within the scene. Strangely, the scene.children array does not reflect this. Take a look at the screenshot here Here is the code sni ...

javascriptthree.js

Concurrent Openlayers maps in Rails - A Viable Option

I've been playing around with Openlayers maps on my website. The map functionality is working perfectly, but I'm having trouble getting the maps to display correctly on my page. My goal is to show a map in each search result on my screen - one m ...

javascriptruby-on-railsopenlayersgeospatial

Is it necessary to specify the JavaScript version for Firefox? (UPDATE: How can I enable `let` in FF version 44 and below)

Our recent deployment of JavaScript includes the use of the let statement. This feature is not supported in Firefox browsers prior to version 44, unless JavaScript1.7 or JavaScript1.8 is explicitly declared. I am concerned about the potential risks of usi ...

javascriptgoogle-chromefirefoxreactjsbabeljs

The CSS class is not properly implemented in the React component

I value your time and assistance. I have spent many hours trying to solve this issue but seem unable to reach a resolution. Here is the React component in question: import styles from './style.scss'; class ButtonComponent extends React.Compone ...

javascriptcssreactjswebpackreact-boilerplate

The code line "npx create-react-app myapp" is not functioning as expected

When running the command 'npx create-react-app my-app', I encountered the following error message: Error: '"node"' is not recognized as an internal or external command, operable program or batch file. Before suggesting to cre ...

javascriptnode.jsnpmnpx

Document ready not functioning properly for redirects

My code below seems to have an issue as it is not directing to the link specified. <html> <head> <script type="text/javascript" src="<?= baseurl(); ?>/public/js/jquery-1.9.1.min.js"></script> <script type=" ...

javascriptphphtmlajax

Warning: Shadcn-UI Form Alert - An element is converting an uncontrolled input to controlled mode

Throughout the course of this project, I found myself repeatedly using const [fileNames, setFileNames] = useState<string[]>([]); and logging the state with console.log(fileNames). However, every time I clicked on the parent element, an empty Array e ...

javascriptreactjsnext.jsreact-hookszod

Retrieve data from a list using an API

I am currently working on creating a dynamic list by fetching data from an API. The goal is to display detailed information in a modal when a user clicks on a specific item in the list. While the list itself is functioning properly, I am encountering an i ...

javascriptangularjsbootstrap-modal

Retrieving a database value in Node.js Firestore containing a space

Hello, I'm just getting started with node Js and I anticipate that it will be a smooth ride! Currently working on an application using node JS with Firestore where I need to retrieve data like "display name": James and "Age": 22 Since Age does not h ...

javascriptnode.jsgoogle-cloud-firestore

Alter the appearance of another div when focused on

Is there a way to change the fill color of the SVG when a user focuses on the input field? I have included the HTML and SCSS for reference, but I'm not sure how to write the CSS code to achieve this effect. <div class="search"> <svg widt ...

htmlcsssvgsassfocus

Challenges arise when IE distorts featured images in a Wordpress theme

I've set up a Wordpress theme that utilizes featured images as header images on pages to allow clients to easily make modifications themselves. The header image container needs to be a fixed size (100% width of the page and 300px height), so I'm ...

csswordpressinternet-explorer

Difficulty encountered when assigning object properties as callback results in node-tesseract package

I'm attempting to utilize the outcomes of a callback function as properties of an object. Here is an example of how I am implementing the module I am constructing: var Capture = require("./Capture.js") const example = async function() { let scr ...

javascriptnode.jsobjectcallbacktesseract

What steps can I take to improve my routing structure in nodejs and express?

My current WebAPI code is pretty modular, but I want to make it even more so. Right now, all the routes are in my server.js file and I would like to separate them into individual controllers. Any suggestions on how to achieve that? Here's an example: ...

javascriptnode.jsexpressroutes

Two Bootstrap modals with customized maximum width and height dimensions

I'm working on designing 2 modals for a Bootstrap themed webpage. https://i.sstatic.net/N4gNl.png One of the modals, the wider one, has been successfully created. Below is the CSS code: .modal-dialog { width: auto; height: auto; positio ...

htmlcsstwitter-bootstrap

VueJS: using dynamic class names within the style attribute

Within my VueJS application, I have implemented Materializecss modals within single page components. Each modal requires a unique dynamic ID due to the application's requirements. The code snippet below showcases this: <template> <div :i ...

javascriptvue.js

Using $npm_package_ notation to retrieve information about the version of a private package

When using Npm, you can easily access package information from the package.json file by using a helpful prefix. For example, you can extract the react version with $npm_package_dependencies_react to find the current version of react listed in the file. Ho ...

javascriptnpm

Experience the click action that comes equipped with two unique functions: the ability to effortlessly add or remove a class

Currently, I am in the process of creating a list of anchor links that contain nested anchor links, and there are a few functionalities that I am looking to implement. Upon clicking on a link: Add a class of "current" Remove the class of "current" from ...

javascript

Is it possible to perform a PHP redirect after the headers have been

I am encountering an issue with a function that needs to redirect the page once a variable is set. The challenge arises from the fact that this function is located at the bottom of the PHP page. As a result, I have already displayed a significant amount ...

phpjavascripthtml

VueJS Unit Testing: Exploring the Content of Attributes- What to Test?

I'm currently facing some challenges with my initial VueJS unit tests using Jest. Although I grasp the concept and have already executed my first set of successful tests, I find myself pondering over the question of "What aspects should I test?" For ...

javascriptunit-testingvue.jsjestjs