Menu with a carousel feature in between each item

I am experiencing an issue with a carousel embedded within a menu using Twitter Bootstrap.

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="carousel slide" id="CarouselTest">
        <div class="carousel-inner">
        <ul class="nav navbar-nav item active" >
                        <li>One 1</li>
                        <li>Two 1</li>
        </ul>

        <ul class="nav navbar-nav item">
                        <li>One 2</li>
                        <li>Two 2</li>

        </ul>


        </div>
        <ul class="nav navbar-nav navbar-right" >
                        <li><a data-slide="prev" href="#CarouselTest" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
                        <li><a data-slide="next" href="#CarouselTest" class=""><i class="glyphicon glyphicon-chevron-right"></i></a></li>
        </ul>       
</div>
</div>
</nav>

Provided is an image displaying the current result:

I attempted to resolve this by adding the following CSS, but it did not make any difference:

<style>
.carousel-inner{
  width:500px;
  height: 100%;
}
</style>

Furthermore, here is a demo on JSFiddle: http://jsfiddle.net/r8uvfo3s/

If you have any insights on how to address this issue, your assistance would be greatly appreciated. Thank you in advance :)

Answer №1

It appears as though there is a new line because the arrows no longer have room to fit.

To resolve this issue, we can utilize the calc() function to adjust the width of the .carousel-inner element and make space for the arrows.

.carousel-inner {
    width: calc(100% - 88px); /* 88px represents the total size of the arrows */
    float: left;
}

See Fiddle example

Update:

If you are unable to use calc(), you can set the position of your .navbar-right element to absolute so it can move up without affecting the layout of the carousel-inner.

.navbar-right {
    position: absolute;
    top: 0;
    right: 0;
}

See updated Fiddle example

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

Ways to prevent body content from overlapping with footer content and appearing below

Currently, I am utilizing an autocomplete text box where the scroll bar exceeds based on dynamic values. However, if more values are displayed in the text box, the scroll bar automatically extends to exceed the footer of the page, resulting in two scroll b ...

Previous and Next Button Navigation

Check out the pagination feature in the jsfiddle link provided: [jsfiddle.net/3u64cx2s/4/] The numbers for navigating through pages (1,2,3) are working correctly. However, there seems to be an issue with the previous and next buttons. When on page 1, cli ...

Tips for pulling image icons from an array and gradually adding them to div elements

Is there a way to dynamically fetch and display image icons from an array in a series of DIVs? I have an array containing the file paths of images and I want to loop through this array to append each image inside different DIVs. The goal is to insert thes ...

Position divs to align text beside icons

I am currently working on a Bootstrap popover to display various pieces of information, each containing an icon and some text. Additionally, I am incorporating twig into this project. Here is the HTML structure: <span class="fa fa-user instructor-con ...

The CSS styles for a:link, a:active, and a:visited do not seem to work with

My page contains the following CSS rule: a:link,a:active,a:visited{text-decoration:none;} I have encountered an issue where this rule is not working as expected. To apply the rule within a div with the id="test", I had to modify the rule like this: #tes ...

How can I adjust the size and width of the autofocus cursor inside an input box using Angular?

How can I modify the height and width of the cursor in an input field with auto focus? app.component.html <input class="subdisplay" [ngModel]="input | number" type="text" (keyup)="getValue(box.value)" name ...

jQuery inadvertently removes hyperlinks from the page

Here's the jQuery code I'm currently using: function getUrlParameter(name) { var pageURL = window.location.search.substring(1); var URLVariables = pageURL.split('&'); for (var i = 0; i < URLVariables.length; i++) { ...

Position elements to the right side of a flex container

I'm utilizing Bootstrap 4 along with this CSS class to vertically align my elements: .vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] { display: flex; align-i ...

Using jQuery to iterate through a JSON array and extract key/value pairs in a loop

I want to create a loop that can go through a JSON array and show the key along with its value. I found a post that seems similar to what I need, but I can't quite get the syntax right: jQuery 'each' loop with JSON array Another post I cam ...

What is the best way to integrate a notification system using jQuery?

I am looking to create a notification area that will refresh whenever a new message is sent using jQuery or Ajax (my database is stored in a soap server). I want to make a soap call every few seconds to achieve this, but I'm not sure how to go about i ...

Populate an ng-repeat table again while maintaining its original sorting order

Incorporating a table filled with data fetched from a webservice using the ng-repeat directive, I have enabled sorting functionality for all columns. Additionally, at regular intervals, the application polls the webservice to retrieve updated data. This o ...

What are the capabilities of Ajax when it comes to utilizing select controls in J

Is there a way to trigger an ajax call when a select control value is clicked? The onChange event doesn't seem to work for me in this case :( This is what I have tried so far: JAVASCRIPT: <script> function swapContent(cv) { $("#myDiv"). ...

Error parsing data in the $.ajaxSetup() function of JQuery

Currently, I am coding a program using jQuery. It was functioning perfectly in Firefox 3.5 until I upgraded to Firefox 4.0. Since then, the dreaded 'parsererror' keeps popping up and causing me quite a headache. I've pinpointed the exact pa ...

Finding the text within a textarea using jQuery

My journey with jQuery has just begun, and following a few tutorials has made me feel somewhat proficient in using it. I had this cool idea to create a 'console' on my webpage where users can press the ` key (similar to FPS games) to send Ajax re ...

What is the reason for the failure of the jQuery code to disable the submit button in the following snippet?

I am working on a feature to disable the submit button in a form when the username, email, password fields are empty. When all of them are filled, I want to enable the submit button. However, the current code is not disabling the submit button as expected. ...

Learn how to successfully place a draggable object into a sortable container while ensuring that the dropped item is a personalized helper element rather than the original object

The jQuery draggable/sortable demo showcases the process of dropping a clone of the draggable item (both draggable and sortable elements share the same structure). However, I am interested in dropping a different DOM structure. For example, when dragging a ...

How can I make a sticky element appear behind a different element?

https://jsfiddle.net/30suam6z/1/ .first { height: 100vh; background-color: red; position: relative; z-index: 2; /* Increase z-index to ensure it covers .test */ } .second { height: 100vh; background-color: yellow; position: relative; z- ...

Scanning barcode and Qrcode with Angular js HTML5 for seamless integration

Looking to scan Barcode and Qrcode on Android, iPhone, and iPad devices for a project that is built on AngularJS and HTML5 as a mobile website. The requirement is not to download any third-party native application on the device, ruling out the use of nati ...

Angular 2's solution for a persistent footer at the bottom of the page

I'm currently working on a project using Angular 2, and I'm looking to implement a sticky footer that always stays at the bottom of the page without being fixed. For reference, you can check out an example here: http://codepen.io/chriscoyier/pen/ ...

When the user clicks, position a div directly below another div

Can anyone help me figure out how to center a div underneath another one when a specific div is clicked using programming? I've tried multiple solutions but nothing seems to work. Below is the code snippet that I have written. You can also check out t ...