When I switch to mobile view, my navigation menu vanishes

Currently in the process of creating a website using WordPress, specifically with a divi theme and utilizing a windows operating system. It seems that everything appears correctly on desktop, however when resizing the window or viewing the site on a mobile device, the navigation bar located at the top of the page disappears. Visit the website here: assyrians.com

Approaches I have taken: Initially, I suspected that plugins might be causing the issue so I proceeded to deactivate them but unfortunately, no changes occurred. The current version of the divi theme being used is 3.19.14, not the newest update which is Version 4.18. Despite this, I don't believe updating the theme is the root cause of the problem.

I am receptive to any suggestions and would greatly appreciate any feedback provided. Thank you for your assistance.

htmlcsswordpressresponsivedivi-theme

Answer №1

Even though your navigation bar is present, it transforms into a hamburger menu on mobile view. Unfortunately, the button appears invisible due to its blank color blending with the background. To resolve this issue, try incorporating the following CSS code onto your webpage:

.mobile_menu_bar:before {
   color: red !important;
}

Alternatively, consider adjusting the navigation menu using the divi builder customizer. Opt for the phone preview mode and implement any necessary modifications.

For more information, refer to Divi's documentation:

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

Activate a button utilizing jQuery keyboard functionality

Here is what I have accomplished so far: http://jsfiddle.net/qEKfg/ I have created two buttons that activate on click and resemble keyboard keys. My goal is to make them animate only when the corresponding keys (CTRL and ...

javascriptjqueryhtmlbuttonkeyboard

Styling on a device can vary from how it appears on a

Using Ionic2, I have an application with messages. In a browser, the message appears like this: https://i.stack.imgur.com/SyCtM.png However, when running on either an Android or iOS device, it looks different: https://i.stack.imgur.com/i0RdO.png The di ...

htmlcsssassionic2

Incorporating a YouTube video

Having trouble integrating a YouTube video that won't play automatically on your website? The video is visible, but just doesn't start playing on its own. What could be causing this issue? Appreciate any help you can provide! ...

cssyoutube

Guide on integrating jQuery for AJAX responses to gracefully transition into view within an MVC3 View

Is there a way to create a smooth fade in effect for a <p> element on my website? Currently, I am using Ajax to retrieve the server time and display it. However, the elements appear abruptly and I would like to make the transition more gradual by ad ...

jqueryhtmlajaxasp.net-mvc-3fade

Exploring the Functionality of POST in AJAX Requests

I'm facing an issue where the data is not displaying on my page even though I am using a Github URL and Ajax POST. Can anyone help me identify what needs to be fixed in the code below? <div id="content"> </div> window.onload = ...

htmljqueryjsonajax

Transfer the textbox value from page-1 to page-2 seamlessly with the help of AngularJS UI-routing

I'm attempting to transfer the textbox value from Page-1 to Page-2 using the code below, but I am encountering difficulties. Page-1.html <div > <div style="height: 400px"> <h2>Partial view-1</h2> <p> ...

c#htmlangularjsasp.net-mvcangular-ui-router

Exploring the Excitement of PHP Regular Expressions (preg_replace)

Looking for assistance with a regex preg_replace function to clean up HTML content being submitted to my app's controller/model. The goal is to strip away unwanted HTML and convert specific elements into proprietary tags for the app. $postText = $_PO ...

phphtmlregexpreg-replace

Live notification application using node.js

I am looking to create a recipe maker webapp for practice purposes. This webapp will consist of 2 main pages: the index page and the recipes page. On the "index" page, users can create their own recipes. On the "recipes" page, users can view a table ...

javascripthtmlnode.jsexpresssocket.io

Image uploading in PHP functions correctly on the local server, however, it encounters issues when attempting to do

We are currently in the process of developing an application that will be available on both iOS and Android platforms. One of the features of our app involves uploading images to a server using a POST request. Strangely, we have encountered an issue where ...

phpioswordpressfile-upload

Aligning text in the middle of two divs within a header

Screenshot Is there a way to keep the h4 text centered between two divs? I want it to stay static regardless of screen resolution. Currently, the icon and form remain in place but the h4 text moves. How can I ensure that it stays in one spot? <!doctyp ...

htmlcss

Unable to activate dropdown menu in html and css

Hi there, I'm facing an issue with hiding the dropdown-menu submenu. I tried using display: block !important;, but it didn't work. Even when I used display: none !important;, the dropdown menu still wouldn't disappear. I want the dropdown s ...

htmlcsstwitter-bootstrap-3visual-studio-2022

`CSS Animation fails to run in Internet Explorer and Microsoft Edge browsers`

My issue with the CSS animation is that while the opacity animates properly, the translate effect does not seem to work as expected. You can see the problem here: https://jsfiddle.net/bLxb8k3s/ It appears that the reason for this issue is because IE and ...

cssinternet-explorercss-animationsmicrosoft-edge

Use a JavaScript function on identical IDs

Can someone please help me figure out how to hide multiple divs with the same id using JavaScript? I attempted the following: <script> function filterfunc() { if(document.getElementById('filter_deductible').value == 'id_50'){ ...

javascripthtml

What is the best method for efficiently loading SVG icons on an HTML page without redundancy? / Is utilizing <use href> recommended?

My struggle with implementing icons in Angular While working on a new Angular project, I've encountered challenges with my current SVG-icon implementation method from a previous project (@ngneat/svg-icon). The process involves organizing SVG files in ...

javascripthtmlcsssvgicons

What is the best way to combine a string with a variable in sass?

Is there a way to merge a string and a variable in Sass to form a variable name that is already present? $size: "sm"; $button-sm: 1rem; $buttom-md: 1.5rem; body { font-size: $button-#{$size}; } The desired output is: body { font-size: 1r ...

javascripthtmlcsssass

Tips for accessing an element using a specific identifier with the variable $key

PHP //This is the HTML code for quantity <p>Qty : <input type="number" value="" name="qty<?php echo $key ?> onChange="findTotal()"/> JS function function findTotal() { var arr = document.getElementsByName('qty'); // Calc ...

javascriptphpjqueryhtml

What could be causing the appearance of two vertical scrollbars after transitioning from ReactJS to NextJS?

During the development of a project in plain ReactJS, I added these two lines to my index.css: overflow-y: scroll; overflow-x: hidden; The purpose was to ensure a vertical scrollbar always appeared without causing a horizontal scrollbar even when there wa ...

htmlcssreactjsscrollnext.js

Creating an overlay with CSS hover on a separate element and the ::before pseudo class

Issue: I am struggling to display the overlay when hovering over the circle element, rather than just the image itself. I have attempted to achieve this using CSS, but can't seem to make it work as intended. Any guidance and examples using JavaScript ...

javascriptjqueryhtmlcss

Is there a way to remove the entire row if I dismiss a bootstrap alert?

Hey there! I'm having a little issue with an alert in a row-fluid. Curious to see? Check out my fiddle. So, when I click the "x" button to dismiss the alert, the row is still visible. Any idea how I can make the entire row disappear when I dismiss it? ...

csstwitter-bootstrap

Creating a polyBezier or polyCurve with Canvas HTML: a step-by-step guide

Looking to connect several points with a curve rather than just a straight line. I attempted using the lineTo() and bezierCurveTo() methods to draw the points. Is there anyone who can assist me in solving this dilemma? Perhaps there is a different approac ...

javascripthtmlcanvas