The bootstrap navbar-collapse feature is causing a shift in the orientation of the navigation elements

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header navbar-right">
<span class="hidden-lg hidden-md" style="padding:8px; color:gray; font-size:20px;">
תפריט
</span>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#toggle" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-right" id="toggle">
<ul class="nav navbar-nav">
<li><a href="cart.php">עגלת קניות <span class="glyphicon glyphicon-shopping-cart"></span>
 <span class="badge badge-error">0</span>
</a></li>
<li><a href="journalism.php">קטעי עיתונות</a></li>
<li><a href="qna.php">שאלות נפוצות</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ערכות מומלצות<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class='text-right'><a href='kits.php?id=1'>עור רפווי וקמטים</a></li>

... (omitted for brevity)

</li>
<li><a href="index.php">ראשי</a></li>
</li>
</ul>
</div>
</div>
</div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header navbar-right">
            <span class="hidden-lg hidden-md" style="padding:8px; color:gray; font-size:20px;">
                תפריט
            </span>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#toggle" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
                <div class="collapse navbar-collapse navbar-right" id="toggle">
                    <ul class="nav navbar-nav">
                        <li><a href="cart.php">עגלת קניות <span class="glyphicon glyphicon-shopping-cart"></span>
                            <?php if(isset($_SESSION['cart']) && $_SESSION['cart'] ): ?> <span class="badge badge-right"><?php echo count($_SESSION['cart']) ?></span> 
                            <?php else: ?> <span class="badge badge-error">0</span>
                            <?php endif; ?>
                        </a></li>
                        <li><a href="journalism.php">קטעי עיתונות</a></li>
                        <li><a href="qna.php">שאלות נפוצות</a></li>
                    </ul>
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ערכות מומלצות<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <?php 
                                    $kits = get_kits();
                                    if($kits)
                                        foreach($kits as $kit)
                                            echo "<li class='text-right'><a href='kits.php?id=".$kit->get_id()."'>".$kit->get_name()."</a></li>
                                                <li role='separator' class='divider' style='background-color:darkgray;'></li>";
                                ?>
                            </ul>
                            <li><a href="thestorybehind.php">הסיפור שמאוחרי המותג</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">מוצרים<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <?php 
                                        $products = get_products();
                                        foreach($products as $prod)
                                            echo "<li class='text-right'><a href='product.php?id=".$prod->get_id()."'>".$prod->get_name()."</a></li>
                                                <li role='separator' class='divider' style='background-color:darkgray;'></li>";
                                    ?>
                                </ul>
                            </li>
                            <li><a href="index.php">ראשי</a></li>
                        </li>
                    </ul>
                </div>
        </div>
    </div>

I encountered an issue with this code on mobile devices where the navigation links are displayed in the wrong order. Instead of showing 'link 1 | link 2 | link 3', it displays them as 'link 3 link 2 link 1', which is not desired. This issue occurs when viewing the navbar on a mobile device and needs to be addressed.

jqueryhtmlcsstwitter-bootstrap

Answer №1

I pasted the code you wrote here, without any PHP, and tested it on this online platform.

It ran smoothly for me, all the links were displayed in the correct order.

- Disregard this line -

You can adjust the screen size using the fiddle link to verify it yourself.

Answer №2

Could you please simplify your code by using only one element for each function? Having two identical divs seems unnecessary.

It appears that the error may be related to your CSS file, as your bootstrap structure looks fine. Have you considered if you are using RTL direction or a similar feature?

Here's a potential solution: Keep the list order standard and adjust your CSS to make links float right instead of left.

CSS

.navbar-nav>li {
    float: right;
}

HTML

<div class="collapse navbar-collapse navbar-right" id="toggle">
    <ul class="nav navbar-nav">
        <li><a href="index.php">Main</a></li>
        <lots of nested elements with specific content>
    </ul>
</div>

Answer №3

Check out the outcome of my code snippet, where the layout changes on small devices using CSS only. I have rearranged the sequence of navigation items with just three items, but you can customize it further as needed.

@media (max-width: 768px) {
        .navbar-nav>li {
            float: left;
            display:inline-block;
            width:100%;
        }
    }

    @media (min-width: 768px) {
        .navbar-nav>li {
            float:right !important;
        }
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header navbar-right">
            <span class="hidden-lg hidden-md" style="padding:8px; color:gray; font-size:20px;">
                תפריט
            </span>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#toggle" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-right" id="toggle">
            <ul class="nav navbar-nav">
                <li><a href="qna.php">שאלות נפוצות</a></li>
                <li><a href="journalism.php">קטעי עיתונות</a></li>
                <li><a href="cart.php">עגלת קניות <span class="glyphicon glyphicon-shopping-cart"></span><span class="badge badge-error">0</span>
                    </a></li>

            </ul>


        </div>
    </div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.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

Struggling with applying mixins

Is it possible to select only the top border using this mixin? Currently, I only need a top border but would like to have the option to use others in the future. Using separate mixins for each side of the border seems inefficient. .bordered(@top-width: 1 ...

csslessmixins

Is there a way to automatically load an entire Facebook profile in one go using a program?

Does anyone know a way to automatically download all photos from a Facebook profile, not just thumbnails? I'm thinking of using wget to fetch the page source code and then extract links to images from child a elements of all div with class="rq0e ...

htmlfacebookwebwget

The horizontal scrolling feature will not activate

I meticulously followed the instructions in a YouTube tutorial to implement this code. What's puzzling is that while the code works perfectly for the person in the video, allowing the grid items to scroll to the right, it doesn't have the same ef ...

htmlcssflexbox

Bootstrap Tags Input - the tagsinput does not clear values when removed

I am attempting to manually remove the input value from bootstrap-tags-input when the x button is clicked, but the values are not changing in either the array or the inputs. This is the code I have tried: $('input').tagsinput({ allowDuplica ...

javascripthtmljquerybootstrap-tags-input

Tips for showcasing five inputs in a single row on a webpage using a customized width in Bootstrap

I am struggling to align 5 inputs in a single row on a page with custom widths. For example, I want the amount input to be smaller than the offer input. I attempted to use columns and apply different classes for size, but the submit button ended up not bei ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Is it possible to swap out the content within a <div> element with an external piece of HTML code using JQuery or JavaScript whenever the viewport dimensions are adjusted?

<html> <head> </head> function () { var viewportWidth = $(window).width(); if (viewportWidth < 700) { $('#wrapper').load('A.html'); }; <body> &l ...

javascriptjqueryhtml

Retrieving data from a dynamic array using jQuery

Within my code, I am working with an array that contains IDs of div elements (specifically, the IDs of all child div elements within a parent div with the ID of #area): jQuery.fn.getIdArray = function () { var ret = []; $('[id]', this).each(fu ...

javascriptjqueryarrays

Hiding loading spinner in Ionic 2 upon iframe completion

I need to embed an external webpage in my app using an iframe. I have successfully implemented a loading animation while the iframe is loading, but I am unsure how to hide the animation once the iframe content has loaded. Unfortunately, I am unable to edit ...

htmlangulariframetypescriptionic-framework

Utilizing autocomplete functionality across multiple fields with API integration in Django Rest Framework

Currently, I am facing an issue with filtering the API list using auto-completion. I have successfully managed to filter based on a single field but struggling with filtering on multiple fields. Here is the HTML code snippet: <div class="form-group"&g ...

jqueryajaxdjangopython-3.xdjango-rest-framework

Tips on maintaining the original text hues that were established using setForeground() when a QTableWidgetItem is picked

Issue at Hand: Currently, when the first row is selected as shown in Figure 2 below, all text colors are changed to black, instead of maintaining their original style displayed in Figure 1. Is there a way to retain the original colors when a row is selec ...

pythoncsspyside2qtablewidgetqtablewidgetitem

Is it feasible to adjust the positioning of invalid tooltips?

I've been trying to figure out how to adjust the position of my invalid tooltips to move a bit to the right and match my input position, but I haven't had any success yet. Here's the image I'm referring to: https://i.sstatic.net/fovSS. ...

htmlcssbootstrap-5

Ways to toggle the display of a div depending on various radio button selections

Currently, I am working on a project using HTML along with Bootstrap and Jquery. My objective is to dynamically hide a div based on the selection of multiple radio buttons without requiring a submit button. The code snippet that I have provided below works ...

jqueryhtmltwitter-bootstrap

What is the solution for fixing scrolling while keeping the header fixed and ensuring that the widths of headers and cells are equal?

Is there a way to set a minimum width for headers in a table and provide a scroll option if the total width exceeds 100% of the table width? Additionally, how can we ensure that the width of the header and td elements are equal? Below is the HTML code: ht ...

javascripthtmlcsshtml-table

Jekyll is detecting invalid XML entity references

My blog is powered by Jekyll and hosted on GitHub Pages. I've noticed that Jekyll sometimes incorrectly XML escapes a special character as &tt;. For example, in the RSS feed located at this link, the source XML: </p> <p> is transfo ...

htmlrubyxmljekylljekyll-bootstrap

Ways to display the values stored in localStorage in distinct div elements based on certain conditions

https://i.sstatic.net/BG3qd.png In my recent project, I have created a feature where users can input specific values through input fields and have them stored directly in localStorage. These values represent different tasks, such as Task: Work Description ...

javascripthtmlcss

Leveraging jQuery to automatically fill in a time field while excluding other buttons

I've been working on using jQuery to automatically fill in a time input field. The functionality is working properly, but the time is also being applied to my other button. How can I make sure it only gets assigned to the time input field? I would re ...

javascriptjqueryhtmldomjquery-plugins

Getting your JQuery ready() statement right is crucial for the proper

I have come across all three variations below: $().ready(); $(document).ready(); $(document.body).ready(); All of them seem to work, but I'm wondering which one is the most appropriate or recommended to use when considering the usage of the ready() ...

javascriptjquerydocument-ready

Achieve a floating right alignment of an unordered list navigation using CSS without changing

I am currently implementing a jquery navigation system which can be found at this link: http://css-tricks.com/5582-jquery-magicline-navigation/ My goal is to have the navigation bar float to the right without changing the order of items (e.g. home, contac ...

jquerycssnavigationcss-float

I am looking to continuously update a div element on my website with data sourced from another site. My goal is to enable the div element to refresh automatically without

I am looking to continuously update the getPrice($url) function every 1 second without the need for manual page refresh. <?php ini_set('display_errors', '1'); Currently, the getPrice($url) function only refreshes when I manual ...

javascriptphpjqueryhtml

Steps to use a full-size image as the background for a <div> element

Here is the image_url I want to use: I would like to make this image the cover picture on the page linked below: However, the image is being cropped automatically. I prefer not to create a separate size for it. Is there a way to crop the image to maintai ...

htmlcssdjangoamazon-s3