Switch the position of menu for desktop and mobile versions

Is there a way to adjust the position of this menu on the desktop version? I'd like to move it slightly further away from the right side. Also, on mobile devices, how can I make the menu links appear on the right side instead of the left?

Currently, there is no custom CSS applied, only the two scripts included below:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
            <a class="navbar-brand" href="#">Logo Here</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">☰</button> 
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav ml-auto">
                    <li class="nav-item active"> <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item"> <a class="nav-link" href="#">Link 1</a>
                    </li>
                    <li class="nav-item"> <a class="nav-link" href="#">Link 2</a>
                    </li>
                    <li class="nav-item"> <a class="nav-link" href="#">Link 3</a>
                    </li>
                </ul>
            </div>
        </nav>

Answer №1

To determine whether the device is a mobile or PC, you can utilize JavaScript's navigator.platform or navigator.userAgent and incorporate else/if statements to check for the operating system. Once these values are identified, you can dynamically add styles to HTML elements using JavaScript.

For further guidance, refer to this helpful resource:

Detecting a mobile browser

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 menu bar becomes distorted when the page is zoomed out

Hey everyone, I could really use some assistance with my menus. Whenever I zoom out of the page, they become distorted. Here is the link to my website: https://dl.dropbox.com/u/22813136/Finding%20Nemo%20Inc/FNemo_front.htm# I tested the link on Internet E ...

What is the reason for elements such as "if" and "else" not being visually

I am currently developing a browser-based code editor with a unique feature. Task: The objective is to highlight specific keywords like if, else, for... when they are entered into the editor. textarea.addEventListener("input", function() { ...

Creating a masterpiece on the final piece of paper

As someone who is new to programming with JavaScript and canvas, I have a function called drawLines(canvasIndex, startPosition) that is used to draw lines on a canvas. The function takes in two arguments: canvasIndex, which represents the canvas being draw ...

Utilizing PHP to dynamically add other PHP CSS files to a CSS file

Something truly peculiar has come to my attention. An unusual discovery was made: there exists a CSS file that is, in fact, a PHP file with a header specifying itself as CSS. This CSS file also includes other PHP files posing as CSS files, all of which ha ...

Will linking to /file.php in an anchor tag always redirect to http://thedomain.com/file.php?

After conducting my testing, I have found that this holds true. However, I want to confirm whether this is a standard behavior across all browsers or just a coincidence in the ones I have tested. In essence, I have a page located at: http://domain.com/s ...

The functionality of filtering a list based on the selected value from a drop-down menu is malfunctioning

When the page initially loads, there is a dropdown with the default placeholder "Select Person Type" and a checkbox list displaying all persons by default. An angular filter is used to display only the selected type of persons from the dropdown (working p ...

Child div height (with embedded iframe) - issue with responsiveness

I have been working on a simple code for a day now, trying to solve a problem with no progress :( My goal is to display an iframe with a background image. However, the snippet code I have is not showing the background image as intended. You can view the li ...

Running a Node.js script on an Express.js server using an HTML button

I've got an HTML button: <button id="save" type="button" onclick="save()">Save</button> and in my JavaScript code, I want it to execute something on the server side using node.js Here's what I have in mind: function save() { / ...

Flask does not provide a direct boolean value for checkboxes

After struggling for a week, I am still lost on where to make changes in my code. I need the checkbox to return a boolean value in my Flask application. Below are snippets of the relevant code: mycode.py import os, sqlite3 from flask import Flask, flash ...

animation for closing the hamburger menu

Having trouble creating a hamburger menu animation. I've set up two divs - one for the basic horizontal lines and one for the X icon. Using jQuery, I can hide and show them (clicking on the lines hides them and shows the X). But now I want to animate ...

Why is it that the default theme of Material UI lacks any stylization at all?

After experimenting with both Carbon Design for React (@carbon/react) and Material UI (@mui/material) in conjunction with Next.js, I encountered styling issues with the components. While they functioned correctly to some extent, there were noticeable discr ...

overrule styling in react native

In React Native, I am looking to modify a specific style within a sub-component. For instance, I have defined a style called CircleShapeView: const styles = StyleSheet.create({ CircleShapeView: { width: 50, height: 50, borde ...

The horizontal scroll feature is dysfunctional when attempting to allocate cell space based on a percentage

I want to display two sections of text that take up the full width of the screen and resize automatically when the screen size changes. Currently, I am using percentage widths to achieve this. However, when the text inside a section exceeds the available ...

Using javascript to dynamically change text color depending on the selected item

I am currently working on a website for a snow cone stand and I want to incorporate an interactive feature using JavaScript. Specifically, I would like to color code the flavor list based on the actual fruit color. The flavor list is already structured i ...

Problem with structuring a Html5 web page

Recently, I created a web page using HTML5. Check out the code below: <header> <img src="img/logo.png" alt="logo"> <hr class="hr-style"> <h1>The Articles</h1> <nav> <ul> <li><a href="#" ...

jQuery inserts a closing tag before reopening it when applying .before()

I have the following HTML code: <ul> <div> <li>a</li> <li>b</li> <li class="break">c</li> <li>d</li> <li>f</li> ...

Ways to create an inline effect for h3 and <hr> elements, or strategies for incorporating a horizontal line following a header

Is there a way to make the H3 and HR elements appear inline? In my design, I want a horizontal line to come immediately after the title without breaking onto the next line like it currently does. <div class="row"> <h3 class="col-md-4 col-sm ...

Unable to create adjacent buttons using display:inline-block

I'm using Angular to dynamically create buttons, but they are stacking vertically instead of appearing side by side <div *ngIf="response"> <div *ngFor="let hit of response.hits.hits"> <button class="btn btn-primary" role="butt ...

jquery: selecting a specific child div element

Is it possible to target a child div of the current element in jQuery, apply toggle functionality to it, and simultaneously remove the link click effect? Below is the HTML code: <a href="#" class="title">Link</a> <div class="data"> c ...

Issue with JQuery on Mobile Devices: Troubles with Dropdown Menu and Loading Function

Having some trouble with my JQuery code on mobile devices. The drop down menu isn't showing up on an iPhone, the load function isn't working to display the additional PHP page on a Samsung Edge 7, and the drop down doesn't seem to be functio ...