How can I position the nav-item to the right without it becoming collapsed?

Hello! I am currently using Bootstrap 4 and attempting to create a navbar menu. Below is the code I have written:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
    </ul>
  </div>
     <ul class="navbar-nav"><li class="nav-item">Login</li></ul>
</nav>

My goal is to have certain items in the navbar not collapse while positioning them on the right side. Initially, I moved the desired item after the toggler button, which worked well but displayed incorrectly on smaller devices.

I then tried placing the item after the collapse div element, but this caused issues with collapsing on smaller screens. Finding the perfect balance has been a challenge, so any advice would be appreciated!

htmlcssmenubootstrap-4navbar

Answer №1

After successfully resolving the issue, I implemented a solution by dividing the navbars into two separate divs using bootstrap4 classes row and col. Each div was given a padding of 0 to ensure proper alignment. Additionally, I utilized an in-line style to position the Login item temporarily for demonstration purposes, but recommend converting it into a separate class for better organization.

 <div class="container-fluid">
    <div class="row">
        <div class="col-8 p-0">
            <nav class="navbar navbar-expand-lg navbar-light bg-light" style="height:4rem;">
                <button class="navbar-toggler" type="button" data-toggle="collapse" 
                 data-target="#navbarText" aria-controls="navbarText"           
                 aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarText">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="col-4 p-0 ">
            <nav class="navbar-nav navbar-light bg-light" style="height:4rem;">
                <ul class=" list-unstyled mr-4" style="margin-top:1rem;"> <li class=" float-right">Login</li>
                </ul>
            </nav>
        </div>
    </div>
</div>

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

Can the functionality of a button be disabled after being clicked a total of 5 times?

Once a user clicks the button five times, I plan for it to be disabled. Can this be achieved solely with HTML, or would JavaScript be necessary? ...

javascripthtml

Flex-wrap functionality in versions of Safari 6 and earlier

As I work on developing my website, I have been using flexbox to assist with the layout. It has been functioning well on most browsers, but I have encountered issues with Safari versions below 6.1. Specifically, I am struggling with flex-wrap as I want the ...

htmlioscsssafariflexbox

Having problems with jQuery's document.on hover toggle method?

Recently, I've been trying to implement a jQuery function that toggles an image when hovering over an element and toggles it back when exiting the element. However, I encountered a problem when using the $(document).on selector. I attempted to use $(d ...

javascripthtmljquery

Issue with Chrome related to svg getScreenCTM function

Check out the jsFiddle demo I am attempting to utilize the getScreenCTM function to retrieve the mouse position based on SVG image coordinates. It seems to work in IE and Firefox, but not in Chrome. When I define the attributes width and height in the SV ...

javascripthtmlcssgoogle-chromesvg

Tips for customizing WTForm fields with unique CSS classes

I've recently put together a basic form snippet: class PostForm(FlaskForm): # for publishing a new blog post title = StringField("Title", validators=[DataRequired()]) submit = SubmitField('Post') The structure of my HT ...

htmlcssflaskflask-wtformswtforms

Utilize the pre tag in conjunction with h:outputtext for improved

Can a pre tag be used around an h:outputtext element like this? <pre class="prettyprint lang-java"> <h:outputText value="#{maintainBusinessProcessBean.featureCodeAssistContent}"> </h:outputText> </pre> I want to show the ...

htmljsfpre

The issue of HTML form not displaying within a Java servlet environment

While following a basic tutorial to learn Java servlet programming in Eclipse, I encountered an issue with the browser not rendering the submit button in the HTML form. Despite reviewing the code multiple times, making small modifications, and even double- ...

javahtmlxmlservletsforms

setting the width to 1fr, the grid will automatically flow in columns

Can I set column width to 1fr with grid-auto-flow: column? grid-template-columns: repeat(4, 1fr) I want all columns to have the same width, based on the widest column, but so far I can only do it by specifying the number of columns: https://i.sstatic.net ...

csscss-grid

What is the best way to insert two rows directly in the middle of two Bootstrap columns?

I need to align two rows in a straight line. Similar to the example shown in the image below: https://i.sstatic.net/EwRat.png After that, I want to split the Bootstrap into two columns, one with col-md-8 and the other with col-md-4. In the col-md-8 col ...

htmlcsstwitter-bootstrap

Issue with Bootstrap functionality in MVC project

I have implemented bootstrap 4.5.2 in my MVC project and encountered an issue with a partial view that should display two columns (col-xs-6). However, the columns are stacking vertically instead of horizontally. Below is the code snippet: BundleConfig.cs ...

c#asp.netasp.net-mvcbootstrap-4

Guide to positioning a div at the bottom of a Drawer while maintaining the same width as the Drawer in React Material UI

Creating a Drawer on the right-hand side using <Drawer/>, I am trying to make a <div> stick to the bottom of the <Drawer />. The width of this <div> should match the width of the <Drawer />. Desired Outcome: https://i.sstati ...

htmlcssreactjsmaterial-ui

Optimizing JavaScript for efficient handling of large arrays

I'm currently developing an image editing program using JavaScript to expand my knowledge of the language. The images I am working with are typically around 3000 x 4000 pixels in size, resulting in a total of 48,000,000 values to manage when convertin ...

javascripthtmlperformanceimage-processingweb-worker

Is there a way for me to generate a tab that shows content when hovered over?

Is it possible to create a tab that displays a vertical list of redirections when the mouse hovers over it, and hides when the mouse is moved away? This seems like a challenging task. Can someone guide me on how to achieve this, especially if it involves ...

c#javascripthtmlcss

typo in tweet share button

There seems to be a strange typo in the Twitter button on my website: https://i.sstatic.net/mx3NB.png Here is the code for the button: <a lang="<?php echo mida_is_english() ? 'es' : 'he' ?>" href="http://twi ...

phphtmltwitter

Ways to reduce the size of a Select box when the option text is too lengthy

How can I reduce the size of the select box by splitting the lines of the options I attempted to modify the CSS with: select { width:100px; } However, only the select element was affected. The options remained the same size. My goal is to have ...

htmlcss

Is there a way to manipulate the appearance of a scroller using JavaScript?

I'm intrigued by how fellow front-end developers are able to customize the scrollbar shape on a webpage to enhance its appearance. Can anyone guide me on using JavaScript to accomplish this? ...

javascriptjqueryhtmlcss

What are some ways to enhance the speed of swipe and scrolling on mobile devices using Javascript, CSS, and HTML?

Dealing with slow scrolling on iPhones has been a challenge for me. The application was developed using Vue.js. I was able to increase the scrolling speed on desktop using Javascript, but unfortunately, it doesn't translate well to mobile devices due ...

javascripthtmlcssvue.js

Guide to inserting text into an html element upon clicking an ASP:Button

In my code, there is a DIV that holds some text. Accompanying the text is an asp:Button. When this button is clicked, I aim to access and save this particular text. Nonetheless, it seems that once the button is clicked, the content of the DIV resets - lik ...

c#javascriptjqueryasp.nethtml

Encountering a 504-loadbalancer error (Gateway Time-out) on PythonAnywhere after waiting for 5 minutes for a response, despite setting SQLALCHEMY_POOL_RECYCLE to 600

Currently, I am utilizing the SPOTIPY API to insert a user's song, album, artist, and user_info into a database. Approximately 4,000 records are being inserted in total. The database updates successfully, but after 5 minutes (response_time = 300 secon ...

htmlmysqlflask-sqlalchemypythonanywherespotipy

What is the solution to adding values from a counter?

I am trying to create a JavaScript counter: function animateSun() { var $elie = $("#sun"); $({ degree: 0 }).animate({ degree: 360 }, { duration: 190999, easing: 'linear', step: function(val) { now = Math.round ...

javascriptjqueryhtmlcsscounter