My website is responsive and functions properly on desktop, but I'm encountering issues with the menus in the navbar not displaying correctly on mobile and tablet views.
To see a screenshot of the problem, you can click on this link:
You can visit my website here:
Although the navbars appear in both tablet and mobile views, the menus are not visible. Can someone please help me diagnose the issue and suggest a solution?
You have a media query in place that hides the #menu-main when the window size is smaller than 1024px
To resolve the issue, simply remove the following code from your CSS:
@media only screen and (max-width: 1028px)
#menu-main {
display: none;
}
//UPDATE It seems like you haven't removed it yet, as evidenced here:
//UPDATE 2 I see now. They are utilizing a second navigation method using a select box called #tinynav1. This is why they hide #menu-main on mobile devices. You might want to mention this for clarity in your questions.
The select box code looks like this:
<select id="tinynav1" class="tinynav tinynav1">
<option>Navigation</option>
<option>your options</option>
....
</select>
It appears that this is a JavaScript plugin from their website. If you do not have this plugin, consider looking it up online:
$("#menu-main").tinyNav({
active: 'selected', // String: Set the "active" class
header: 'Navigation', // String: Specify text for "header" and show header instead of the active item
label: ''
});
<-- JS library
My dropdown menu is misaligned and not centering on the page, even after multiple attempts to fix it using HTML and CSS only. I have refrained from using JavaScript or JQuery for this issue. CSS Code: <style type="text/css"> /* STYLING FOR DROPDOWN ...
Take a look at this code snippet: <!DOCTYPE html> <html> <body> <p>Click the button to show the prompt box.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> funct ...
My JavaScript web app utilizes AngularJS to simplify tasks, but I've encountered an issue. I'm trying to change views from an ng-controller using $location.path, but for some reason, the view isn't updating even though the path in the $loca ...
My modal is experiencing an issue where the top part gets cut off when the screen is reduced, disappearing under the bookmarks and address bar. I attempted a solution mentioned in this resource by setting the top and bottom to 0, but it did not resolve the ...
Currently, I am in the process of developing a webpage that utilizes Angular to dynamically alter DOM elements. The project includes a public folder housing HTML, CSS, JavaScript, and JSON files. To share the project, I have set up Node to run it from loca ...
Is there a way to maintain the timer in a quiz even after refreshing the page? <html><h1>Js Timer</h1> <div style="font-weight: bold;" id="quiz-time-left"></div> <script type="text/javascript"> var total_seconds = ...
I have set up an event listener function to utilize popcorn.js for displaying subtitles. Additionally, I have created functions that are unrelated to popcorn.js outside of the event listener and declared a global variable array. However, when attempting ...
I have created a mini game inspired by diep.io on codepen, where you can upgrade your reload and shooting capabilities. However, I have encountered an issue where the bullets start moving at different speeds and end up overlapping each other after shooting ...
Trying to fetch data from the swapi API to display film titles using jQuery. Below is the JavaScript code: $(function(){ function promiseTest(){ return $.ajax({ type: 'GET', url: 'https://swapi.co/api/people/', } ...
When working on an animation in javascript, I encountered a problem that I can't seem to identify. I am attempting to make the pan function work with the "mover" function, but it seems like either I am not using the properties correctly within the "tr ...
I experimented with this code and attempted to modify the display properties of the header and div tags. However, I encountered an issue where the image in the next div tag appeared in the top left corner. My goal is to position it on the next line to th ...
There is a snippet of HTML that resembles this: <a class="" data-style-name="Black" data-style-id="16360" "true" data-description="null"<img width="32" height="32" I am trying to extract the text "Black" from it and then click on it. However, there ...
Currently, I am utilizing the Vue.js framework to create a dynamic list that updates based on two different list objects. My main objective is to adjust the border of the list cards depending on a specific condition. Below are the defined cards: <li ...
I've been working on a project focused on employee data stored in a MySQL database. To display this data in an HTML table, I utilized PHP. $sql = "SELECT * FROM Stock_Management.`staff_details`"; $result = mysqli_query($conn, $sql); if(mysq ...
How can I display selected cities on a different webpage after clicking a button? Currently, I can only get the results on the same page. For example, if a user selects NYC and Delhi, those cities should be displayed on another HTML page. ...
Imagine we have two separate pages: X.html and Y.html. Even though they are not from the same origin (different domain, port, etc.), I have the ability to edit both of them. My goal is to incorporate Y.html into X.html using an iframe. The content of Y.ht ...
Upon successful login, the website displays a button with the HTML code below: <button class="logout-button">Logout</button> The button is also hardcoded into the website's HTML for consistency. However, after refreshing the page, the AJ ...
I'm facing a dilemma: I've got some HTML code and I need to extract the content within tags. Instead of resorting to multiple substring operations, I'd like to employ regex for this task. However, I'm encountering difficulties when it c ...
I successfully implemented a web push notification for Google Chrome using Google Project and Service Worker. One thing I'm curious about is how to customize or style the push notification. The plain message box doesn't quite cut it for me – I ...
Is there a way to customize the text color inside the Tab component while still allowing it to change color when selected as an active Tab? For example: <Tabs centered onChange={handleChange} value={value} textColor={'secondary'} indicatorCol ...