Responsive Menu is not compatible with the Carousel Image Slider

Hey there, Developer Community! I recently delved into programming a few days back and decided to create a homepage for an artist.

The page features a responsive menu that switches to a dropdown menu with a button when the screen size shrinks. It also includes a scrolling effect. However, upon adding a carousel (image slider), the menu bar goes haywire. To better illustrate the problems, I have attached some screenshots:

Issue 1

https://i.sstatic.net/MxDHW.png

The menu bar seems misaligned towards the right side instead of filling out the top of the screen.

Issue 2

https://i.sstatic.net/p2MdV.png

When the screen is resized to a smaller dimension, the bar shifts downwards. I'm hopeful that someone can assist me in resolving this issue. Here's the code snippet:


/* CSS Code */
html, body {
      margin: 0;
      padding: 0;
      width: 100%;
}
 
body {
      font-family: "Helvetica Neue",sans-serif;
      font-weight: lighter;
}

/* More CSS styles here */

Image Slider:

Much gratitude in advance!

Warm regards, Eddy.

javascriptjqueryhtmlcss

Answer №1

Take a look now to solve your issue. Simply copy and paste it into your HTML page.

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Viktoria Nagel</title>
    <link rel="stylesheet" href="css.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <style>
        ...
    </style>
</head>

<body>


    <!-- IMAGE SLIDER -->
    ...
    ... (omitted for brevity)
    ...

            </div>
            <!---Script Menu-->
            <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
            <!-- Include all compiled plugins (below), or include individual files as needed -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
            <script type="text/javascript">
                ...
            </script>

</body>

</html>

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

Creating a dynamic HTML5 video player with Fancybox and VideoJS

What is the best way to ensure that an HTML5 video remains responsive inside a fancybox that is already responsive? Here is the code that I currently have: <a class="preview" href="#inline123"> <img class="item" src="/thumbs/thumb.jpg" widt ...

jqueryhtmlvideoresponsive-designfancybox

Generating a bullet list from an array of objects

Looking to create an unordered list with vanilla JS, using an array of objects to populate the list. Struggling a bit on how to accomplish this. Here is my current code: let myObj = [ {name: "Harry Potter", author: "JK Rowling"}, {name: "Hunger Gam ...

javascriptlistfor-loopappendchildcreateelement

What is the best method to extend my borders to the very edge?

Struggling with table borders extending to the edge on a website using master pages and CSS stylesheet. This issue requires some troubleshooting, so any help would be appreciated. The problematic website is here. I need the border under the banner menu to ...

htmlasp.netcss

A search form utilizing prepared statements in mysqli

Well met again, everyone. I recently reached out for help on improving some messy code I had put together, and the response was swift. Thank you for that! You can find the original question thread here: PHP - Search database and return results on the sam ...

phphtmlmysqli

What is the process of incorporating a JS engine into an ASP.NET Core MVC React application?

An error will be displayed by the upcoming service. reference missing services.RegisterJsEngineSwitcher(settings => settings.DefaultEngineName = V8JsEngine.EngineName) .AddV8(); ...

javascriptasp.netasp.net-mvcasp.net-core

Creating a minimalist metro-inspired menu using HTML and CSS

After researching online for a few days, I've just started learning HTML/CSS and my skills are currently at about a 6 out of 100. I have this code that functions as a blogger HTML widget, but I want to customize it further. Here is the code snippet: ...

htmlcssmenumicrosoft-metro

Why does a boolean value behave this way in JSX, specifically when used in a checkbox scenario?

I am completely new to React/JSX and I'm struggling to grasp the logic behind how things function. For instance, <input type="checkbox" checked=true /> results in <input type="checkbox checked />. On the other hand, <inp ...

javascriptreactjs

The masonry filter is functioning only for a singular time

I have successfully implemented multiple filters using the jQuery Masonry plugin. However, I am facing an issue where once one filter is used, another filter cannot be applied until the page is reloaded (I am still learning about this). Below is my code: ...

jqueryjquery-pluginspluginsfilterjquery-masonry

"AngularJS makes it easy for the logged-in user's information to be accessible and available across

I need to ensure that user information is accessible across all views after logging in. How can I adjust the code to be able to retrieve the pseudonym from another view? Could you provide an example as well? Below is my login controller: app.controller ...

javascriptangularjsangularjs-scopefirebase-realtime-databasefirebase-authentication

What is the method for extracting the text from the currently chosen option?

const desiredOption = x.match(/<option selected="selected" value='[^']*'>([^<]*)<\/option>/)[1]; What is the best way to extract the text content from the selected option in the given string? ...

javascriptjquery

Please refresh the page after being redirected by the server

Here's a new question that closely relates to the topic discussed in this thread about refreshing pages in jQuery Mobile. In my app, I have a /login page where users are redirected when they first access the app and are not logged in. To log in, all ...

jquerynode.jsexpress

CSS problem: Footer encroaching on the content above

For more information, please visit this link When the window is minimized, the footer overlaps the content above it. Despite spending hours trying to fix this issue, I have not been successful. View when maximized: here View when minimized: here Even af ...

cssoverlap

Assign the callback function to execute when the select element loses focus

Is there a way to trigger a function when the user clicks out of a select menu without selecting an option, even though I know about the onChange and onFocus event listeners associated with the select HTML element? ...

javascripthtml

Clicking the input value will trigger a change

Modify input value on click event Here is the code snippet: <div class="inputQty"> <span> <small class="up">^</small> <small class="down">V</small> </span> <input type="text" ma ...

jqueryinput

Discover the process of retrieving an image from the backend with React and Node.js

Hey there! I'm currently working on a Housing blog using ReactJS and NodeJS. One of the tasks I tackled was creating a login controller in NodeJS to send user details, including the image path from the database, to the frontend. The image path is sto ...

javascriptnode.jsreactjs

Can we re-trigger the document.ready() jQuery function for injected HTML through AJAX?

Presenting my scenario: <html> <body> <head> ... <script> $(function(){ $('.do-tip').qtip({ content: 'This is a tip of active ho ...

jqueryajaxdocument-ready

The issue of background-attachment: fixed not functioning properly on Safari

Currently, I have the following code implemented on an element that extends 100% of the browser: #section_white { background-attachment:fixed; background-image:url(image_url_here.jpg); background-position:100% 100%; background-repeat:no-repeat no- ...

csssafaricross-browserbackground-attachmentbackground-size

Using either Javascript or jQuery, I want to set a value within an if statement

Can I set a value within an if statement, like this: if (a = jQuery("#user > .mask.fix > .a1").css('display') != 'none'){ b = a + 'hello'; //b=jQuery("#user > .mask.fix > .a1").css('display')+&apos ...

javascriptjqueryhtmlfunctionif-statement

Error encountered in jQuery validation script due to incorrect data type

Looking to experiment with the jQuery validate plugin in an MVC application by trying a simple example. Here is a JS module with a method: ValidateRestriction: function (element) { var inputs = $('form').validator(); inputs.data("validat ...

javascriptjqueryjquery-validate

Lazy Load immediately loads images that are visible on the screen without needing a click

I am facing an issue with Lazy Load on my image-heavy website. I want the images to load only when a button is clicked, but currently, it only partially works. Images below the fold follow the desired behavior of loading on click, but those above the fold ...

javascriptjquerylazy-loadingjquery-lazyload