How can I convert the left links in my navigation bar to a CSS drop-down menu to make it more responsive on small screens?

Here is the structure of my HTML (at the top):

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css' />
    <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css' />

    <link rel="stylesheet" href="stylesheet/main.css" />
    <link rel="stylesheet" href="stylesheet/style.css" media="(min-width: 808px)" />
    <link rel="stylesheet" href="stylesheet/mobile.css" media="(max-width: 807px)" type="text/css" />
    <script src = "script.js"></script>
</head>
<body>
    <div class = "nav">
        <div class = "container">
            <ul class="pull-left">
                <li class = "content"><a href="">Home</a></li>
                <li class = "content"><a href="/about">About</a></li>
                <li class = "content"><a href="/projects">Projects</a></li>
                <li class = "content"><a href="/recruit">Recruiting</a></li>
                <li class = "content"><a href="/help">Help</a></li>
            </ul>
            <ul class="pull-right">
                <li><a href = "index.html">Exatreo</a></li>
            </ul>
        </div>
        <br />
        <br />
        <div class = "top_page">
            <h1 class = "mainTitle">title</h1>
            <p class = "slogan">Slogan</p>
        </div>

    </div>

Below is the CSS for the navigation in the style.css file:

.nav li {
    display: inline;
}
.nav a {
    border-color: rgb(230, 230, 230);
    border-style: solid;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    color: #e74c3c;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
}
.nav a:hover {
    border-color: #e74c3c;
    transition-duration: 0.5s;
}
.nav {
    margin-bottom: 2%;
}

I am looking to implement a feature using HTML/jQuery/Javascript/CSS where if the screen width is less than 808px, then the .pull-left list transforms into a button. When this button is clicked, the usual content should be displayed below. Thank you for your help!

javascriptjqueryhtmlcssmobile

Answer №1

To dynamically adjust the styling of your website based on device resolution or screen position, you can utilize @media queries in CSS.

Alternatively, you can leverage Bootstrap framework for responsive design. Take a look at this example to see how the layout changes with different browser widths.

You have the flexibility to create a mobile menu that is initially disabled and then use @media queries to display it only when needed, while hiding the default menu.

I hope this information proves helpful to you!

Answer №2

To begin, it is essential to incorporate javascript into your project. One approach is to detect the user's device on page load: 1: 

var isMobile =(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i).test(navigator.userAgent);
(choose whichever suits your needs best). Additionally, you can utilize window width properties if you prefer designing for specific screen sizes rather than individual devices. Implement necessary functions and bindings for the dropdown menu or any other type of navigation. 2: You should create two different templates - one for mobile devices and another for desktops. Load the appropriate template based on the detected device like this:

var container = document.getElementbyId("navContainer"); if (isMobile) { container.innerHTML = <'mobile-template'> } else { container.innerHTML = <'default-template'>;

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

Alter the DOM element every ten seconds

Is there a way to modify a DOM element every 10 seconds? I attempted the following approach: var endurance = angular.element('.progressbar').height(); var endurance2 = angular.element('.progressbar').css('height', endurance- ...

javascriptangularjsdom

Apply a coating of white paint and add color to the border

I was struggling to create a form that has a white background color and a green border at the same time. I am using Bootstrap and it seems like I cannot apply both styles simultaneously. Here is the link to the form design I am trying to achieve: . Below ...

htmlbootstrap-4

Ways to add a line break within JavaScript code

I am currently developing a bot for my Discord server and working on logging messages to a text file. All the necessary information about the message is stored in a variable named logger, and I am using Node.js to append my log file. When attempting to ad ...

javascriptnode.js

Expanding using CSS3 to ensure it doesn't take up previous space

Currently, I am working on an animation for my web application. More specifically, I am looking to scale certain elements using CSS3 with the scaleY(0.5) property. These elements are arranged in a vertical list, and I want to ensure that they do not take u ...

javascripthtmlcss

Ways to store a component in cache once its route is triggered

There are 3 components in my project: 1 parent and 2 child components with router outlet. The child component becomes active whenever its route is called, sharing data using a service. Both of these child components have complex views. When switching bet ...

javascriptangulartypescriptcachingangular-ui-router

Can CSS Variables be changed globally using jQuery?

How can I dynamically change CSS Variables globally using jQuery? Check out this code snippet: $("div").click(function() { // Update the global variable "--text_color: rgb(0, 0, 255);" to a new value like "--text_color: rgb(0, 255, 255);" }); :roo ...

javascriptjquery

What steps are necessary to alter the background color of a jumbotron?

Can someone help me figure out how to change the background-color of the 'jumbotron' class in Bootstrap? The default color set in bootstrap.css is #eee. I've tried various methods like replacing it with none, none !important, or transparent ...

htmlcsstwitter-bootstraptwitter-bootstrap-3background-color

When a panorama is entered in ThreeJS/Panolens, what is the orientation of the camera?

I want to use an equirectangular image with Panolens and achieve the same panorama viewer effect as seen in the links below: Even though Panolens.js is based on Three.js, I encounter a different result when I input my image compared to the first link abov ...

javascriptthree.js

slider not functioning properly at the moment

I am in need of assistance with Fraction Slider from @jacksbox. I have read through the documentation multiple times, but I cannot seem to get my slider to display the effects it is meant to. The website I am working on can be found at . Here is an example ...

javascriptjqueryslider

The compatibility between Node JS and Vue JS front-end seems to be glitchy and

I am currently developing a Node JS backend application and Vue JS front-end. In order to authenticate users, I need to implement sessions in the API. For my backend server, I am using the following components: express (4.18.2) express-session (1.17.3) c ...

javascriptnode.jsmongodbexpressexpress-session

Learn the best way to utilize a stylus in Vue files to interact with JavaScript variables

For instance: <script> export default { data() { return{ varinjs: 1, } } } </script> <style lang="stylus"> varincss = varinjs body if varincss == 0 ba ...

cssvue.jssasslessstylus

Is there a way to shift the map to the right side without disrupting the text placement?

please provide image description Here is the code snippet: <div class="row w-100"> <div class="col-lg-6 my-4 offset-lg-1"> <iframe src="#" width="600" height=&q ...

htmltwitter-bootstrapbootstrap-4bootstrap-5

Guide on developing a personalized validation system with Vuetify regulations for verifying the presence of an item

I'm currently working on my first CRUD web app using Vue 2 + Vuetify, but I've hit a roadblock while trying to add validation to a form. Specifically, I need to ensure that no item with the same title already exists in the database. You can view ...

javascriptvue.jsvalidationasynchronousvuetify.js

Shifting an item to a specific location using three.js

I'm attempting to fire bullets or projectiles utilizing three.js: let renderer, camera, scene, light, plane, cube, spheres; initialize(); animate(); function initialize() { renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); ...

javascriptthree.js

The content of the HTML request may not always be displayed exactly as it appears in the browser

I've been trying to extract comments from a website using Python and urllib. Although I am successful in obtaining the HTML, I noticed that the comment section is missing. Here's what my Python code retrieves: <div data-bv-product-id="681012 ...

pythonhtmlurllib

Ways to ensure a ul li element perfectly fits inside a div element without any spaces

As a newcomer to CSS and HTML, I'm facing an issue with my ul li dropdown menu and login boxes. The background colors are red and blue, but there are gaps within the div that I want to fill with the height of the div. Below is the code snippet: @key ...

htmlcss

Can a search engine algorithm be developed to display an iframe based on the keywords entered in the search query?

Is it possible to create a search engine algorithm in HTML, CSS, and JavaScript that takes keywords from a search bar input and displays the best solution (or solutions) through iframes? html, css, javascript Below is the code for the iframes and search ...

javascripthtmlcssalgorithmiframe

What is causing jQuery toggleClass to fail in removing a class?

I have successfully implemented a Skills accordion feature, but I am now trying to add a button that toggles all the skill sections at once. However, I am facing issues with jQuery not correctly adding or removing classes on the .accordion-trigger-all elem ...

javascripthtmljquerycss

What are the best ways to integrate markdown into my Vue.js projects?

Is there a way to utilize markdown within the context of vue.js instead of regular HTML paragraphs? ...

javascriptnode.jsvue.js

Steps for positioning a play button at the center of all images

index.html - here is the index.html file code containing all the necessary html code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width ...

htmlcssflexboxcss-selectors