`Getting smaller screen hides navigation menu - CSS problem`

As I work on developing my website, I have encountered a small issue with the top navigation bar. It functions perfectly at a certain screen resolution, but when I adjust the browser window or view the site on my iPad, the navigation bar disappears. I'm struggling to identify what might be wrong with the CSS code for the navigation menu.

The website has been uploaded to a testing server:

Below are the HTML and CSS codes in question:

<section id="start" class="start">
       <div id="section-nav" class="section-nav">
          <div class="container">
            <ul class="nav">
              <li><a href="#start" id="link-start">Home</a></li>
              <li><a href="#process" id="link-process">Product&amp;Services</a></li>
              <li><a href="#portfolio" id="link-portfolio">Work</a></li>
              <li><a href="#team" id="link-company">Company</a></li>
              <li><a href="#contact" id="link-contact">Contact</a></li>
              <li><a href="fn/index.html">Fi</a>&nbsp;|&nbsp;<a href="index.html">En</a></li>
            </ul>
          </div>
        </div>

Please check the CSS code as well to ensure everything is correctly set up. You may want to inspect the elements on the browser to see if any issues are flagged there. Thank you!

javascripthtmlcss

Answer №1

It seems like there is a misunderstanding - the issue lies in applying "display: none;" to both elements:

media="screen, projection"
.section-nav

and later on (for smaller screens):

media="screen, projection"
screen.css:2057@media only screen and (max-width: 768px)
.section-nav .nav { display: none; }

It appears that you may have overlooked the different media queries and their effects, which can be confusing. This kind of confusion happens frequently. Using Chrome Inspector can help unravel these complexities :)

Answer №2

Mobile browsers have limited support for the position fixed property.

To ensure better compatibility, consider using a media query to switch from position fixed to position absolute on mobile devices.

Answer №3

within the screen stylesheet, at line 93

.section-nav{ visibility:hidden;}

The use of visibility:hidden is causing this problem.

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

Unleashed placement and drifting

Is it possible to style this layout without specifying an exact height for "Element 1"? Code Element1 { positon: relative; width: 100%; height: auto; /* Avoiding specific height */ } Inner1 { position: absolute; top: xyz px; left: xyz px; } Inner2 { po ...

css

Adding double quotes to arrays in D3.js after using the .map method

Here is the code snippet I am working with: d3.csv("static/data/river.csv", function(data) { var latlongs = data.map(function(d) { return [d.Lat,d.Lng]; }) var lineArray1 = latlongs; console.log(lineArray1); When I view the outpu ...

javascriptarraysd3.js

What could be causing a blank page to appear after being redirected? (Using NextJS 13 API Route)

After struggling with this issue for 2 days, I'm throwing in the towel and reaching out to the community for assistance. I've been tasked with setting up a basic login system for a new project using NextJS v13. However, it seems like a lot has c ...

javascriptnode.jstypescriptnext.jsmiddleware

How can I retrieve the height of a hidden image in Internet Explorer?

I am encountering an issue with images that have been set to display:none. I am using javascript (document.getElementById('elem').height) to retrieve the height/width of these images. While this method works in most browsers, IE is reporting th ...

javascriptcssinternet-explorer-7

What is the best way to delete the twbs directory from my Laravel project?

I am struggling to incorporate twbs into my Laravel project. How can I remove this folder? https://i.sstatic.net/vaITB.jpg composer.json { "name": "laravel/laravel", "description": "The Laravel Framework.", "keywords": ["framework", "laravel ...

csstwitter-bootstraplaravellaravel-5.4twitter-bootstrap-4

Troubleshooting issue with AngularJS ng-repeat not functioning properly when using Object key value filter with ng-model

Is there a way to have an object with an ID as a key value pair? For example: friends = { 1:{name:'John', age:25, gender:'boy'}, 2:{name:'Jessie', age:30, gender:'girl'}, 3:{name:'Johanna', ag ...

javascripthtmlangularjs

What is the most efficient method for swapping out a portion of an array with a different one in Javascript?

Currently experimenting with Dygraph and have successfully integrated a reloader feature that adds high-resolution data as users zoom in on the graph. To maintain the original file boundaries, I am preserving the existing data and inserting the newly load ...

javascriptarraysloops

Using an AngularJS ng-repeat alias expression with multiple filters

As stated in the Angular ngRepeat documentation, the alias expression can only be used at the end of the ngRepeat: It's important to note that `as [variable name]` is not an operator, but rather a part of the ngRepeat micro-syntax and must be place ...

javascriptangularjsangularjs-ng-repeat

Experience the illusion of three-dimensional depth with SVG light and shadow effects

I am trying to achieve a 3D effect on an SVG by adding a light source at the top and left border, and a shadow on the bottom and right border. Here is an example: #div1 { background: #ddd; } #div1, #div2, #div3 { width: 100px; height: 100px; po ...

htmlsvgsvg-filters

The appended button remains unresponsive when clicked

After conducting extensive research, I have come across numerous questions on overflow regarding a specific issue, but none of the solutions seem to work. The problem revolves around a button that appears on the page when another element is clicked. The u ...

jqueryhtmlappend

Creating an illustration with HTML5 from an image

Is it possible to draw on an image by placing a canvas on top of it? I am familiar with drawing on a canvas, but I am facing an issue where clicking on the image does not trigger the canvas for drawing. How can I resolve this? This is how my HTML looks: ...

javascriptjqueryhtmlhtml5-canvas

Hold off on moving forward until the content has been loaded using ajax within loops

I am facing an issue with waiting for ajax requests to complete before proceeding. My task involves iterating through all the options in five select lists. Upon selecting an option in "Select1", it dynamically loads or refreshes "Select2". The same proces ...

javascriptjqueryajax

Making a synchronous call to a web API using JQuery

Understanding JQuery promises and deferred objects has been a bit of a challenge for me, so please bear with me. I should also mention that my application is built using React, Typescript, and ES6. Let's imagine we have an array of objects: [{ Objec ...

javascriptjqueryajaxtypescriptpromise

What causes the transformation from "&" to "&amp;" upon the completion of page loading?

While using Firefox and working on a page, I noticed that & turns into &amp;. Normally, I would fix this with html_entity_decode(), but it's not working in this case. Then I stumbled upon something interesting. An alert is triggered once the ...

htmlknockout.jsspecial-characters

Step-by-Step Guide to Cutting a Cube with Three.js

I am facing a unique challenge that I haven't seen discussed before. From my limited knowledge of how 3D objects are rendered using webgl and three.js, it appears that I am struggling to create a geometric shape similar to a parallelepiped that does ...

javascriptthree.jsgeometry

Adding different colors for a range of values in the Grey_CircularLinearGauge component of DOJO can be achieved by customizing the

I'm currently working with the dojo toolkit and I am looking to incorporate the Grey_CircularLinearGauge component into my project. Here is an example of how I want it to look: In addition, I also need to customize the colors based on specific value ...

javascriptjquerycssdojo

Can we not customize a nested component using the 'styled()' function in MUI?

Looking at the code snippet below, my attempt to style an MUI Stack component within an MUI Dialog component seems to be falling short. The Stack styles are not being applied as expected: const CustomDialog = styled(Dialog)(({ theme }) => ({ ' ...

javascriptcssreactjsmaterial-ui

What is the best way to prevent the body from scrolling when scrolling on a fixed div without making the body's scroll bar disappear?

Is there a way to prevent the body from scrolling while I scroll on a fixed div? I attempted using overflow:hidden for the body, which stops scrolling but causes the page to shake when the scroll bar disappears. Is there a solution that allows me to keep ...

javascriptjquerycss

Should a Service Worker be automatically installed on each page reload, or only when a user navigates to a new page?

Currently in the process of developing a PWA. I have encountered an issue where the service worker seems to be installing on every page reload or when navigating to a different page within my app. It appears that many files are being cached during the inst ...

javascriptprogressive-web-apps

Tips for preserving newly add row with the help of jquery and php

Currently, I am attempting to implement a functionality on a Wordpress theme options page that dynamically adds rows using jQuery. Below is the HTML code snippet from the THEME-OPTIONS page <a href="#" title="" class="add-author">Add Author</ ...

phpjavascriptjqueryajaxwordpress