Displaying a vertical arrangement of collapsed menu items with a centered navbar and logo positioned at the center of it (using bootstrap)

I'm currently working on a website that features a centered navbar with a logo also centered inside it. The tech I'm using is Bootstrap and LESS.

Issue

  1. When the navbar collapses on mobile/tablet view, the menu items are displayed horizontally instead of vertically, which doesn't look good.

  2. In mobile/tablet view, the logo appears inside the toggle menu when you click on the 3 bars, making the design even worse.

  3. While the toggle menu opens on clicking in mobile view, it doesn't close when you click on it again.

My attempted solution

I attempted to use a media query to display list items as "inline-block" for devices under 752px, but it didn't work as expected.

For the logo, I tried using the "visible-lg" class to make it visible only on large screens. It appeared on the right instead of the center, and CSS didn't help align it properly.

I've been researching for days for a fix to have a centered logo inside a centered navbar, with no success. Any assistance or suggestions would be highly appreciated.

Here is the HTML for the navbar:
<!-- Your HTML code here -->

CSS:

/* Your CSS code here */
htmlcsstwitter-bootstrapmobilenavbar

Answer №1

Here is a sample navbar code that you can implement on your website. You can also use these classes for creating responsive CSS.

 <!DOCTYPE html>
<html>
<head>

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>

<body>
    <nav class="navbar">
        <div class="container">


<a class="navbar-brand" href="index.php">MyWebsite</a>

    <div class="navbar-header navbar-right">
        <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="index.php">About</a></li>
            <li><a href="index.php">Services</a></li>
            <li><a href="index.php">Contact</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Menu<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="index.php">Link1</a></li>
                    <li><a href="#">Link2</a></li>
                    <li><a href="#">Link3</a></li>
                    <li class="divider"></li>
                    <li <a href="#">Separated Link</a></li>
                    <li class="divider"></li>
                    <li <a href="#"> Another Separated Link</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
<script type="text/javascript" href="js/bootstrap.min.js"></script>
<script type="text/javascript" href="js/jquery.js"></script>

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

The "Open in new tab" feature seems to be missing for links when using Safari on iOS

My webapp contains links structured like this: <a href="/articles/">Articles</a> I am using JavaScript to control these links within my app: $(document).on("click", 'a', function(ev) { ev.preventDefault(); ev.stopPropagat ...

javascriptioshtmlsafari

Issue with AngularJS $http not responding to ng-click after first call

My landing controller uses a service that initiates the $http call by default when the App loads. However, I need to pass parameters based on click events, so I implemented an ajax call on ng-click. The issue is that I keep receiving the same data on ng-c ...

javascriptangularjsnode.jshtmlexpress

Combining data inputted into a remote/modal bootstrap form and submitting it alongside the parent page form

I am trying to create a parent bootstrap page with a form that includes a dynamic modal. The modal loads an external page containing form elements and a submit button that is supposed to submit the form on the parent page. However, when I click the submit ...

jqueryajaxtwitter-bootstrapmodal-dialog

Transfer the document to the server using ajax

I've been attempting to upload an image to the server using the following simple code: <form enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <progress ...

javascriptjqueryajaxhtmlupload

Retrieve information from a dynamically loaded page using jQuery

I'm currently attempting to extract text from a body that has been downloaded through ajax. I'm facing the problem that I can't inject this new body into an iframe or one of my elements because it contains scripts that could potentially bre ...

jqueryhtmlajaxdomhtml-parsing

Is a Responsive Split Layout the Solution for Your Web Design Needs?

I'm looking to create a webpage layout where the left half of the viewport is for Login and the right half is for Signup. This layout should be split side by side on tablets, desktops, and large screens, but stacked vertically (Login on top, Signup on ...

htmlcssbootstrap-4

When attempting to refresh, the global.Exp.Data.getLocalDataSet() function returns empty

In the first method, data is retrieved from the database and populated into the grid. The second method is used for viewing user details. When the user clicks on this method, it displays the user details. However, if the page is refreshed at that time, v ...

jqueryasp.nethtmlazure

Creating a platform that allows users to build custom themes on a website using ASP.NET/C# programming language

I'm looking for a sophisticated approach to designing an ASP.NET website where users can easily create personalized themes for their sites using a user-friendly interface. Can ASP.NET themes assist with this? Should the interface enable users to gener ...

asp.netcssthemes

How to apply a series of spaces using span/tspan with jquery/javascript

Check out this fiddle: http://jsfiddle.net/jzLu4toe/3/ <span id='tghj'></span> $('#tghj').text('Hey There'); I'm facing an issue where I need to insert multiple spaces inside a span element. ...

javascriptjqueryhtml

What is a way to center content vertically without using extra containers?

I've been facing challenges in vertically aligning an item within its container. Despite trying multiple suggestions that advise wrapping the content in another div or container, I encountered various issues which I won't delve into. Therefore, ...

htmlcssflexbox

What are the implications of sending a query for every individual input field alteration in a large online form?

I am creating a system for an educational institution where faculty can input scores using php and html. The layout is similar to an excel sheet, with 20 questions per student and about 60 students on each page. My dilemma is whether it's acceptable ...

phphtmlmysqldatabase

Table of Wordpress posts

There has been a question on how to easily add tables to blog posts without having to use HTML. While some are comfortable inserting the code directly into the blog, others like my friend prefer alternatives that don't involve coding. Is there a simpl ...

htmlcsswordpresscontent-management-system

Utilize duplicate named CSS grid rows as a reference

Summary; This method currently works, but it requires adding multiple nth-child selectors for each new person and their answer. I am seeking a solution that can dynamically handle any number of rows using an even and odd selector to simplify the process. ...

htmlcsscss-grid

What is the best method for maintaining jQuery and Bootstrap features while implementing seamless page loading?

Solution Needed for Page Loading Issue I am currently working on implementing non-refresh page loading on my website using ajax. When a user chooses a page from the sidebar, the content section of the website should update dynamically without refreshing t ...

javascriptjqueryajaxtwitter-bootstrapdatatables

Difficulty Clicking Links with CSS 3D Transformation

I'm currently working on implementing a CSS 3D transform effect on my website. However, I am encountering some issues with clicking the links once the card has been flipped over. Question Why is this happening? How can I resolve this so that I can ...

csscss-transforms

Enhance your website with a customizable language selection feature using HTML and CSS

Currently, I am in the process of creating a dynamic language selection feature using HTML and CSS. Initially, this is what it looks like: https://i.stack.imgur.com/bhnaA.png Upon hovering over it, this is the effect I want to achieve: https://i.stack.i ...

htmlcss

How can I make my webpage unselectable except for specific content within a div using CSS and JavaScript?

During a live editing session, I am looking to make only specific portions of the page selectable. Can someone provide guidance on how to disable selection for everything except within a particular div? ...

javascriptjquerycss

The stylesheet malfunctioned while attempting to load varying layouts in separate controllers

Hey, I encountered a strange issue. After clicking on the three pages displayed in the images below: Step 1 controller welcome Step 2 other controllers Step 3, back to step 1 view controller welcome The final image, when returning to controller welcom ...

cssruby-on-railsasset-pipelineturbolinks

Selenium, launch a fresh browser window

I am currently working on a project using Selenium and Java. My goal is to click on either a link or a button (as shown in the HTML snippet below), then confirm that the number of tabs or windows has increased. Finally, I want to close only the newly opene ...

javahtmlseleniumselenium-webdriver

Comparing the name and URL of a link using Selenium webdriver in C#

I am currently looking for ways to automate the testing of links on a Sharepoint site, ensuring they are connected to the correct URL. However, I have hit a roadblock when it comes to performing the comparison. After locating the links and adding them to ...

c#htmlvisual-studioselenium-webdriverautomated-tests