Whenever I try to make my links responsive, they don't seem to work as intended

This is the HTML snippet

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
    <div class="top-bar">
        <div class="container">
            <div class="row">
              <div class="top-bar-section">
                 <p class="top-bar-question">Do you have any questions? Call Us 0774747790 </p>
              </div>
              <div class="row">
                 <div class="top-nav-bar">
                    <img class="logo" src="assets/images/logo.png" alt="">
                    <ul class="top-nav-options">
                        <li class="top-nav-option"><a class="top-nav-option-link" href="#">Home</a></li>
                        <li class="top-nav-option"><a class="top-nav-option-link" href="#">Appointment</a></li>
                        <li class="top-nav-option"><a class="top-nav-option-link" href="#">Treatment</a></li>
                        <li class="top-nav-option"><a class="top-nav-option-link" href="#">Facility</a></li>
                        <li class="top-nav-option"><a class="top-nav-option-link" href="#">Gallery</a></li>
                        <li class="top-nav-option"><a class="top-nav-option-link" href="#">About Us</a></li>
                        <li class="top-nav-option"><a class="top-nav-option-link" href="#">Contact Us</li></a>
                    </ul>
                 </div>
              </div>
             
            </div>
        </div>
        <div class="row">
              <div class="background-image-block">
              <img class="background-img1" src="assets/images/background.jpg" alt="">
              </div>
        </div>
        <div class="row">
            <div class="box-left">
                
            </div>
            <div class="box-mid">
                
            </div>
            <div class="box-right">
                
            </div>
        </div>
        
    
</body>
</html>

This part contains the CSS styling

@media only screen and (min-width: 200px) and (max-width: 275px)
{

    body    
    {
        background-color: #FFFFFF;
    }

    .top-bar
    {
        background-color: #3FA4F6;
        width: 500px;
        height: 40px;
    }

    .top-bar-section
    {
        margin-top: 10px;
        width: 375px;
    }

    .top-bar-question 
    {

        color: white;
        font-size: 12px;
        padding-left: 12px;

    }

    .top-nav-bar    
    {
        width: 375px;
        height: 100px;
    }

    .top-nav-bar
    {
        margin-top: 20px;
    }

    .logo 
    {

        width: 141px;
        margin-bottom: 8px;
        padding-left: 15px;

    }

    .top-nav-option 
    {
        font-size: 17px;
        padding: 4px;
        font-size: 15px;
        list-style: none;
        color: black;
    }

    .background-img1 
    {
        width: 272px;
        margin-top: 176px;
        height: 180px;
        margin-left: 13px;
    }

    .top-nav-option-link
    {
        text-decoration: none;
        color: black;
    }
    
    .top-nav-option-link:hover
    {
        text-decoration: none;
        color: #3FA4F6;
    }

    .box-left 
    {
        width: 229px;
        height: 271px;
        background-color: #3FA4F6;
        box-shadow: 0 0 5px grey;
        margin-left: 38px;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .box-mid 
    {
        width: 229px;
        height: 271px;
        background-color: #3FA4F6;
        box-shadow: 0 0 5px grey;
        margin-left: 38px;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .box-right
    {
        width: 229px;
        height: 271px;
        background-color: #3FA4F6;
        box-shadow: 0 0 5px grey;
        margin-left: 38px;
        margin-bottom: 10px;
        margin-top: 10px;
    }


}

The issue with the links not working after the "Appointment" option has been identified to be related to using Bootstrap CSS. Removing the Bootstrap CDN resolves the problem but eliminates the necessary container and row classes for organization. The need for these classes has been highlighted in structuring the document.

htmlcssbootstrap-4

Answer №1

Eliminate the margin-top property from the .background-img1 class and apply a margin-top of 176px to the .background-image-block class;

The issue with the non-functional links is due to the positioning of the .background-image-block div element at the top.

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

Can cookies operate on a local server?

Similar Question: Cookies on localhost with explicit domain Here is the code snippet that I am using after the user has logged in: setcookie("user",$entered_username, time()+(60*60*5)); setcookie("password",$entered_password, time()+(60*60*5)); ...

phphtmlcookies

Issue with sticky positioning not functioning properly with overlapping scrolling effect

When the user scrolls, I want to create an overlapping effect using the 'sticky' position and assign a new background color to each div (section). However, despite setting 'top' to 0 for the 'sticky' position, the divs still s ...

htmlcss

Split the output into two separate columns in a cshtml file using a foreach

Is there a way to modify my current code so that the output is displayed in two columns instead of one? Would using flex grid be the best approach, or is there another method I should consider? <div class="col-12 box-container"> <div class=" ...

c#htmlcss.net

rendering google charts using jade template

I am facing an issue while trying to display a google annotated chart on my jade project. I managed to successfully load a pie chart, but I am having trouble rendering a chart that requires the container element size to be explicitly defined. You can find ...

cssexpressgoogle-visualizationpug

When trying to load a php page2 into page1 via ajax, the Javascript code fails to execute

Currently, I am in the process of learning PHP and JavaScript. I have encountered a particular issue with a webpage setup. Let's say I have a page called page1 which consists of two input fields and a button labeled 'Go'. Upon clicking the & ...

javascriptphpjqueryhtmlajax

Loading templates dynamically within ng-repeat is a powerful feature that enhances the flexibility and

I need help loading a template dynamically while using an ng-repeat: <ul> <li ng-repeat="prop in entity" > <div ng-include src="prop.template"></div> </li> </ul> The value of prop.template is the URL of ...

htmlangularjs

Positioning a designated div directly above a designated spot on the canvas

I'm grappling with a challenge in my game where the canvas handles most of the animation, but the timer for the game resides outside the canvas in a separate div. I've been struggling to center the timer around the same focal point as the squares ...

javascripthtmlcsscanvas

Result of utilizing Bootstrap Radio buttons

Looking at the HTML snippet below, I am trying to display two lines of radio buttons. However, when I click on a radio button in the first line and then proceed to click any radio button in the second line, the result of the radio button in the first line ...

javascripthtmlformsdombootstrap-4

Is there a way to modify the button's color upon clicking in a React application?

I am a beginner in the world of React and currently exploring how to utilize the useState hook to dynamically change the color of a button upon clicking. Can someone kindly guide me through the process? Below is my current code snippet: import { Button } ...

javascriptcssreactjsreact-hooksfrontend

Positioning a span to be below an input field

Below is the code for a Blazor component that includes a textbox which can be edited with the click of a button. @if (_editing) { <div class="floatingbox position-relative"> ...

cssbootstrap-4blazor-server-side

"Comparing the functionality of importing vs requiring the Rails Bootstrap gem

Incorporating the Bootstrap framework into my Rails project was something I wanted to do. Following the guidance outlined in this GitHub repository and instructions: https://github.com/twbs/bootstrap-rubygem, it became clear that changing my application. ...

ruby-on-railsasset-pipelinebootstrap-4

Ways to create animation solely using CSS for a div element

After spending hours searching for solutions, I still haven't found the perfect answer without using JQuery. I am attempting to add a slide-up animation effect to my divs. I have tried numerous options, including the simplest one: transition: all li ...

htmlcssangularjsanimation

Click on the ng-click attribute to access the HTML page

I need a button that can perform the following tasks: Execute multiple functions from the controller using ng-click(they must be called in HTML) Direct to another html page located in "static/page.html" onclick, when used for navigation (location.hr ...

htmlangularjs

Guide to switch background image using querySelector

I am currently trying to figure out how to set the background image of a div block by using querySelector. I have attempted various methods in my test code below, but unfortunately none seem to be working. Can someone please provide assistance? <!DOC ...

javascriptcsshtmljquery-selectorsbackground-image

Is it possible to use the Stop Button on the HTML5 Audio Tag to halt a live MP3 stream

Is there a way to add a stop button as well? Currently, I have play and pause buttons, but the stop function doesn't truly clear the music buffer in the browser; it just stops playback without resetting to the beginning. This is fine for MP3 files but ...

javascripthtmlaudiotags

Switching a div class in Angular 6 with a button click: A step-by-step guide

In this scenario, I have a div with the class name old. There is also a button that, when clicked, should toggle the div's class name between old and new. I am looking for a solution using Angular 6. Below is the code snippet: I am relatively new to ...

htmlangular

Trouble getting proper alignment displayed with JavaScript and CSS

If anyone has a solution for printing content in a div using JavaScript and CSS, please help. The main div with the id 'preview' contains content taken from a database using PHP and MySQL. However, the data on the print page appears vertically an ...

javascriptphpcss

Is it possible to modify the global CSS in react-router according to the different routes?

I am attempting to customize a global CSS class (.ant-content) on a per-route basis. I have experimented with importing CSS files that override .ant-content for specific React components loaded in different routes. However, the issue is that these CSS fi ...

cssreactjsless

What could be the reason for my ng-init not functioning properly?

<body ng-init="user=${userID};month=${month};curPageNum=${currentPage}"> Using JSP, I set initial values in the body tag. However, in the controller, I have the following code: console.debug($scope.user + " "+$scope.month} The issue is that only ...

htmlangularjs

Use the double data type in MySQL to handle null values when blank form fields are submitted

Currently, I am facing an issue with a form that I have created to update a mysql database using PHP and HTML. In my MySQL database, I have set the data type as double (3,1). The problem arises when I submit data to the database and leave some form input f ...

htmlmysqlformsnulldouble