The mobile device is not displaying the navigation menu (responsive) and columns correctly

@media only screen and (max-width: 960px) {
  .flexslider {
    margin-top: 100px;
  }

  .main-header {
    padding: 15px 0;
  }
  .main-header .logo {
    margin-top: 20px;
  }

  .service-item, .team-member {
    margin-bottom: 50px;
  }

  .our-skills {
    margin-top: 60px;
  }

  .flex-caption {
    top: 20%;
  }
  .flex-caption h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .flex-caption p {
    font-size: 14px;
    width: 70%;
    margin: 0 auto;
  }

  .left-header, .right-header {
    text-align: center;
  }
}

I need help with the mobile display of my 'main-header' and 'body header'. The responsive menu nav bar and company logo in the main-header container are not resizing correctly on tablet and mobile screens. This causes overlap between the navigation links and the logo when viewed on tablets, and the three-line navigation bar appears off-screen on mobile devices. Additionally, clicking on the three-line nav bar does not reveal the navigation links. Furthermore, the St. Vincent de Paul company logo (.png) is not resizing for mobile screens, resulting in layout issues with the body header links. I'm seeking assistance to fix these mobile display problems. Website URL: www.svdpplymouth.org - Thank you!

.top-header {
  background: #191970;
  color: white;
  padding: 10px 0;
  z-index: 1000
}
.top-header .left-header span {
  display: inline-block;
  margin: 8px 20px 0 0;
}
...
<nav>

... 

 </header></div>

Answer №1

To make your menu responsive, simply include an additional line in your media query:

@media only screen and (max-width: 960px) {
.main-header .logo h1 img{width:100%;}
.responsive-menu .toggle-menu{font-size:40px;}
.responsive-menu .toggle-menu{top: -16px;right: 20px;position: relative;}
.responsive-menu .menu{z-index:99;top:0}
.responsive-menu .additional-line{color:red;} /* Add this line for the menu */
}

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

Firefox 3.x exhibits a glitch where PNG background images vanish and are unable to load

The issue at hand is as follows: I am facing a problem with a non-floated div (#bottom) that has a fixed height defined in CSS (24px), which used to display its background (bottom.png) until I added content inside. CSS: #bottom {height: 24px; backgroun ...

What is the most efficient method for incorporating fonts.googleapis.com into CSS files for use on both HTTP and HTTPS pages?

My website functions correctly when accessed through URLs that start with either http:// or default to the http protocol if not specified. However, an error occurs stating that the main.css file cannot be found when the URL begins with https://. The lates ...

jQuery fade() function failing to fade elements

Check out this jsbin prototype that includes two menu items which display a sub-menu when clicked: The sub-menu visibility is controlled using fadeIn() and fadeOut. However, the opacity transitions do not occur. Instead, the sub-menus either instantly app ...

Contrary information found on Developer Sites regarding the use of shouldOverrideUrlLoading in webview

Many Android developers choose to implement their own webview component. Despite the numerous discussions on this topic on stackoverflow, there still seems to be a lack of clarity surrounding it. In order to handle opening links within a WebView, Android ...

Troubleshooting problem with CSS scaling on smartphones

I'm attempting to create a website (the first one I've ever designed) dedicated to my girlfriend's cat. However, when viewed on a mobile device, it doesn't look good. I've made an effort to adjust the meta viewport tag, but it does ...

Issue with Android contact list, problem with Asynctask and setting the adapter

Currently, I am working on developing a GPS app that includes a contact list feature for connecting with other individuals. As a newcomer to Android Studio, I am encountering some challenges in resolving an issue. Initially, I successfully implemented the ...

Creating a contact page with Font Awesome icons similar to my design using Flexbox in CSS

How can I achieve the desired layout for this image? I have written some code and applied CSS to get the output, but I encountered an issue. When the text in my address section is too large, the icon gets misaligned and collapses. How can I fix this issue ...

Error Encountered in Settings Fragment due to Runtime Exception

I am facing an issue with my preference fragment which consists of the following files preference.xml <?xml version="1.0" encoding="utf-8"?> <PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"> <EditTextPrefer ...

Update the image when a new message is received from another user

I am currently working on developing a chat application with speech bubbles, where the messages are retrieved from a JSON file. One of the challenges I'm facing is changing the color of the speech bubble when a specific user sends a message. In my i ...

Issue encountered [duplicate platform classes] during application assembly in release mode

Recently, I updated Android Studio and transitioned from GDAA to Google Drive REST API due to GDAA being deprecated. However, after the update, I encountered an issue with building my app in release mode which was not present before. The error message I re ...

How about this: "Leveraging the power of #IEroot to achieve a

Has anyone successfully implemented the IE CSS hack #IEroot? I came across it while reading this informative article, but unfortunately, it doesn't seem to be working for me. I'm currently trying to resolve an inline styling bug in order to achi ...

What is the method to retrieve Calendar Column titles from a database in Android version 2.1?

I have encountered an issue with my code that works perfectly fine in Android 1.6 but throws an IllegalArgumentException on devices running Android 2.1. Uri calendars = Uri.parse("content://com.android.calendar/calendars"); Cursor managedCursor = ...

Steps for creating an effective page preloader

My website involves fetching data upon loading. I am working on implementing a preloader that will be displayed until the site fully loads and all initial requests are completed. I've come across tutorials for preloaders that rely on setting a time i ...

Utilize the inherited background color for a linear-gradient effect

Here is the code snippet I am working with: <label className={classes.trigger} htmlFor={uniqueId} ref={labelRef} style={{ background: val, borderColor: val }} /> This is the corresponding CSS: .trigger { display: block; posit ...

The Unity android app refuses to close

After creating an android application by generating the .apk file using unity3d-vuforia, I encountered a problem where the app wouldn't quit when clicking the back button. To handle this issue, I made modifications to the customEventHandler.cs file cr ...

Exporting Jar files in Android Studio has become quite the challenge

In the process of creating a new Android Studio project, I added a new module and obtained the Unity plugin from the following path: "D:\Unity\Editor\Data\PlaybackEngines\AndroidPlayer\Variations\mono\Release\Cl ...

Tips for dynamically modifying style mode in Vue.js

I am looking to implement a feature where the style can be changed upon clicking a button. In my scenario, I am using Sass/SCSS for styling. For example, I have three different styles: default.scss, dark.scss, and system.scss. The code for dark.scss look ...

What steps can I take to get a border functioning correctly on my website?

For my friend's birthday, I am designing a website that resembles a greeting card. The layout consists of text in the center and an image of a birthday cake. To give it a card-like feel, I want to create a border around it. Although I know how to adju ...

Utilizing Dojo widgets in Xpages

I'm having trouble applying CSS to certain dojo elements within my Xpage. Here is the CSS style sheet I am using: .formFields { color: rgb(5, 56, 107); font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: nor ...

Elements inside the Bootstrap 3 navbar are actually external

I am having trouble with the collapsible navbar, specifically the alignment of the right side. Here is the code snippet related to it: <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav navbar-right"> ...