[Support request] Custom css applied to mobile menu

Home Forums Support [Support request] Custom css applied to mobile menu

Home Forums Support Custom css applied to mobile menu

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #592019
    Dean

    Hi again,

    I’m using GP v2.1.2 and GP Premium v1.6.2 (along with Elementor v2.0.14 and Elementor Pro v2.0.9).

    In my menu, I have a custom class for some custom link text — to use as “headings” to divide a single menu (see the image).

    My custom class is nav-section-head and the code I use in my child theme css stylesheet is:

    
    .nav-section-head {
    	background-color: #cf4d1d;
    }

    This works great on the desktop menu (primary nav menu).

    But … on the mobile / tablet — the background color doesn’t change — it stays in the regular color I’ve set in the customizer (which is just the default colors).

    I’ve looked through the Documentation and Forums and can’t find the CSS I need to use to get this to display okay in the tablet/phone hamburger menu.

    I tried using a media query, and also starting it with .mobile-bar-items .nav-section-head — but no luck.

    (I also tried making a hover color change for the desktop by adding a separate css entry for the same custom class with an “a:hover” setting, but no luck there too!)

    Can you tell me what CSS I need to make this work on the mobile menu?

    In the customiser, when you click the mobile icon (to mimic mobile view), it displays as I would like it — but not in reality.

    For ADMIN — you can see this under “Packages” on the URL shown in this post.

    Thanks,

    Dean

    Mobile menu as it is really, and how it shows in customizer

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #592020
    Dean

    (Sorry, am not sure if the image worked, as I don’t get a post preview) … the link is:

    https://imgur.com/a/TEyQiCb

    Thanks!

    #592154
    David
    Staff
    Customer Support

    Hi Dean, it looks correct to me. Can you try clearing your browser caches.

    #592744
    Dean

    Thanks David,

    I’ve tried that to no avail. Eg, just now, opened in Safari on iPad Mini (haven’t used Safari browser for at least 6 months, never had this site loaded) — still doesn’t show custom background color.

    I tried an online emulator (MobileTest.me) and it works fine, however I all “real” mobile devices I have tried don’t show the orange background color.

    I have WP Fastest Cache running, I cleared the cache for a particular page, then loading that page URL into another unused browser — still no luck.

    In desktop mode, I have the trusty F12 key to inspect what’s going on, but on the smaller devices, no such tool that I know of to have a look and see what may be overriding this CSS setting.

    Is there any other suggestion you might have to help find the cause?

    #592874
    David
    Staff
    Customer Support

    Hi Dean,

    it really sounds like a caching issue, can you flush the Cache, and disable WP Fastest Cache?

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.