Having difficulty in adjusting the menu responsiveness breakpoint in Flatsome theme

Having trouble toggling my mobile menu at 1172px when the default is set to 850px. The code below is not working for me.

You can visit my website here: www.maria-educandoconamor.com

I have implemented the following CSS to make it work:

@media only screen and (max-width: 1172px) {
.header-nav, .header-nav-main, .nav-line-grow, .nav-size-small, .nav-spacing-medium, .nav-uppercase {
display: none !important;
}

.mobile-nav, .nav.nav-left {
display: flex !important;
}
}

Unfortunately, the solution is not achieving the desired result. Can anyone pinpoint what I might be doing wrong?

Thank you.

csswordpressmobilemenubreakpoints

Answer №1

If you're looking to customize the breakpoints for certain tags labeled with specific classes, this CSS code can help achieve that:

@media only screen and (min-width: 1173px) {
    .show-for-desktop {
        display: flex !important;
    }
    .show-for-medium, .hide-for-desktop {
        display: none !important;
    }
}

@media only screen and (max-width: 1172px) {
    .hide-for-medium {
        display: none !important;
    }
    .show-for-medium {
        display: flex !important;
    }
}

To target tags within your header specifically, you can use the following CSS. Remember, a space between selectors means AND, while a comma means OR:

@media only screen and (min-width: 1173px) {
    div.header-inner .show-for-desktop {
        display: flex !important;
    }
    div.header-inner .show-for-medium, div.header-inner .hide-for-desktop {
        display: none !important;
    }
}

@media only screen and (max-width: 1172px) {
    div.header-inner .hide-for-medium {
        display: none !important;
    }
    div.header-inner .show-for-medium {
        display: flex !important;
    }
}

For more insights on menu responsiveness breakpoints, check out this related question: flatsome menu responsiveness breakpoint.

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

sophisticated HTML navigation bar

I am looking for a way to create a menu where the drop-down items overlay the rest of the menu when the screen width is small. Here is my current code: nav{ line-height:100%; opacity:.9; }nav ul{ background: #999; padding: 0px; border-radius: 20px; ...

javascripthtmlcssnav

How to use CSS to insert a line break after the fourth child in a

At this moment, the example displays an unordered list containing 8 list items. I am curious if there is a way to add a line break after the 4th li item using only CSS (no HTML or JavaScript). Perhaps something like: ul li:nth-child(4n):after { conte ...

htmlcssdomhtml-lists

The secrets of z-index: Ensuring nested elements stay behind their parent element

Check out this demo to see the problem: http://jsfiddle.net/5sqxQ/2/ I am trying to make the sub menu appear below the main menu. I also want to use JavaScript to slide the menu from underneath when hovering over the parent li element. I don't real ...

cssnestedz-index

Change your Bootstrap 4 navbar to a two-row layout using Bootstrap 5

Looking to update the navbar from Bootstrap 4 to Bootstrap 5 with two rows I came across this code snippet that works well for me in Bootstrap 4: https://codepen.io/metismiao/pen/bQBoyw But now I've upgraded to Bootstrap 5 and need help converting it ...

cssbootstrap-5

Guide for splitting an HTML webpage into 3 separate divs with individual scrolling feature

Currently, I'm working on creating a website with three columns that allows users to scroll down each one independently. I attempted to set the columns at 33% width, but whenever I add content, a strange gap appears at the bottom of the screen and pr ...

csshtml

What is the best way to align text in "reverse order" to the center?

While utilizing text-align: center, I noticed that the remainder remains at the end. Here is how it currently looks: https://i.sstatic.net/DjQU4.png However, I am seeking to achieve this effect where the remainder remains at the start: https://i.sstatic ...

htmlcss

Rank users based on the quantity of their posts using a Wordpress plugin

I am working on developing a straightforward WordPress plugin that will rank users based on the number of posts they have published. I already have the code for this functionality, but I am currently facing challenges in sorting the array and displaying ...

phpmysqlwordpressplugins

Border color options for select boxes

Currently, I am working on my first Django-bootstrap project and dealing with a select box. I am trying to customize it so that when clicked, the border of the select box and its options turns yellow, which is working well. However, there is an additional ...

javascripthtmlcssdjangobootstrap-4

Hyperlinks springing to life on mouseover

After spending countless hours tweaking my CSS code, I've hit a roadblock and need some assistance. My issue lies with the links on hover that seem to be jumping unexpectedly. The goal was to create a mobile-responsive hamburger menu that transforms i ...

javascriptjqueryhtmlcss

Creating unique columns for a custom post type in WordPress

Currently, I am working on customizing WooCommerce, an eCommerce plugin for WordPress. In WooCommerce, products are set up as a new post-type called "product." I have written the following code to add a custom column to the edit screen of this post type: ...

phpwordpresswoocommerce

Issue Encountered While Loading CSS using Webpack and Babel

I am currently working on a SSR React App using Webpack3 and Babel6. However, when I launch the server, it is not able to locate any css file (Error: Cannot find module './file.css'). Here is an overview of my current folder structure: src/ | ...

cssreactjswebpackimportbabeljs

Issues with hover effects not applying to background colors (ReactJS)

React Component: import React from "react" const Category = () => { return ( <table cellSpacing={25}> <tr> <td id="fruits">Fruits & Vegetables</td> ...

javascripthtmlcssreactjs

How can I apply specific styling to certain cells within a table?

Is there a way to apply styles specifically to certain table headers in an HTML table without altering the HTML or introducing JavaScript? I need to target only 4 out of the total 8 table headers. To see the code and example for this question, visit: http ...

htmlcss

Stylish Zigzag Border with a Patterned Background

Recently, I've been experimenting with creating a header that features a unique zigzag border. Traditionally, this effect is achieved using images to achieve the desired look. (1) I am curious if there is a way to implement a cross-browser compatible ...

htmlcsscss-shapeszigzag

The image filter plugin is functioning properly in one project, however, it is not working in

After successfully using a plugin from w3schools to filter elements in one project, I encountered an issue when attempting to implement it in another project. Here is the link to the problematic code pen: https://codepen.io/zakero/pen/mZYBPz If anyone ca ...

javascriptjqueryhtmlcss

How to customize CSS based on the specific Django app you are using

I am new to Django and currently customizing the admin section. I want to change the CSS based on the app I am working with. Is this possible? I've noticed that the system uses the CSS from the first static folder it finds. Is there a workaround for t ...

cssdjangodjango-admindjango-apps

Placeholder input limit

How can I display my placeholder text in the input without extending the length of the input box? https://i.sstatic.net/J71CF.png Below is the HTML code used: <section class="comment-input"> <input type="text" placeholder="Try adding your o ...

htmlcss

Positioning Text in a Responsive Video Background

Trying to center text within a video has been a challenge for me. Even after removing the header container, achieving the desired results is still possible, which works fine with me. However, I'm still struggling with getting this text centered! < ...

htmlcsstwitter-bootstrap

Dockerize Your PHP Application for Seamless Deployment

Can I leverage docker-compose to streamline the setup process for a fully installed PHP application in one step? Let's use WordPress as an illustration for this scenario. Upon examining the official wordpress docker repositories, I came across a high ...

phpwordpressdockerdocker-compose

Unusual phenomenon of child unordered list interacting with parent list item's animation

http://jsfiddle.net/RedKnight91/Z6Ueu/4/ Hey there! Take a look at the last menu (at the bottom). When you hover over one of the LIs with the "+" symbol that have children UL, which is a submenu, the slideToggle displays the child UL, but after the animat ...

javascriptjqueryhtmlcss