Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • February 4, 2018 at 1:06 pm #907502
    johnstanley1990

    Hi there,
    I would like to remove the breadcrumbs for mobile and tablet sized screens. I have searched the forum and found others who want to achieve the same result. The CSS recommended by one of the moderators is:

    @media only screen and (max-width: 768px) {
    .title_container { display: none !important; }}

    The problem with this is that for me it only removes breadcrumbs on the tablet size screen – when I shrink the browser to mobile size the breadcrumbs reappear.

    Can you let me know what the correct CSS is to remove breadcrumbs on both tablet and mobile?

    Many thanks

    February 4, 2018 at 1:43 pm #907514
    Mike

    Hey johnstanley1990,
    I have just tested this code on the Enfold 2017 Demo and it seems to work for mobile and tablet.
    Please clear any cache plugin and your browser cache and check. Or include the url to your site so we can take a closer look.

    Best regards,
    Mike

    February 6, 2018 at 4:12 pm #908657
    johnstanley1990

    Hi Mike,

    Thanks for your quick reply, it’s strange, any code I try putting in the Quick CSS box under styling doesn’t seem to work. The only one that has worked so far is

    span.breadcrumb-title { display: none; }

    which removes the text on the breadcrumbs.
    I am also trying to change the background colour of the submenu. I tried putting this code I found on the forum into the Quick CSS, but nothing happened either.

    #top #wrap_all .sub-menu {
    background: #444;
    }
    #top #wrap_all .avia_mega_div {
    background: #333;
    }
    #top .main_menu .menu ul li a {
    background: #222;
    }

    More info in private content.

    Many thanks

    February 6, 2018 at 8:45 pm #908794
    Basilis

    Hi,

    Can you please make sure cache on staging is disabled?

    Best regards,
    Basilis

    February 6, 2018 at 8:48 pm #908797
    johnstanley1990
    This reply has been marked as private.
    February 7, 2018 at 3:58 am #908886
    Mike

    Hi,
    From what I can see you have a site cache and/or minify plugin, because your css has this path:
    /wp-content/cache/minify/1ddba.css
    Please check your cache plugin for the option to clear or purge it, and then please disable it.
    Caching plugins are great once your site is built and done, but it makes it hard to change your css while you are developing it.
    I believe once you do this and also clear your browser cache you will see your css changes.

    If you still have issues, please include your admin login in the Private Content area so we can take a closer look.

    Best regards,
    Mike

    February 7, 2018 at 11:16 am #909009
    johnstanley1990
    This reply has been marked as private.
    February 7, 2018 at 11:39 am #909029
    Mike

    Hi,
    W3 Total Cache can be persistent, you will want to disable the minify first by unchecking the box, then click “empty all caches” then disable the plugin from the plugin page. Please see this article: How to Clear Your Cache in WordPress Then clear your browser cache and check your site.

    Best regards,
    Mike

    February 7, 2018 at 1:14 pm #909104
    johnstanley1990
    This reply has been marked as private.
    February 7, 2018 at 4:48 pm #909283
    Ismael

    Hi,

    Disabling the plugin should deactivate the minification altogether. Let us know if that works for you. If not, please provide the login details in the private field so that we can test the modifications.

    Best regards,
    Ismael`

    February 7, 2018 at 5:40 pm #909323
    johnstanley1990
    This reply has been marked as private.
    February 8, 2018 at 12:05 am #909468
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    #top .av-submenu-container,#top .av-subnav-menu a {
background: #f2f2f2!important; 
}

    Best regards,
    Mike

    February 8, 2018 at 3:53 pm #909813
    johnstanley1990
    This reply has been marked as private.
    February 9, 2018 at 4:41 am #910092
    Mike

    Hi,
    I took a look at your Enfold Theme Options > General Styling > Quick CSS field and found you were missing a } for the code you already had in there. I corrected and added the code from above:

    #top .av-submenu-container,#top .av-subnav-menu a {
background: #f2f2f2!important; 
}

    It is working now, Please clear your browser cache and check.

    Best regards,
    Mike

    February 9, 2018 at 4:11 pm #910301
    johnstanley1990

    Thank you Mike for your help and patience, this ticket can now be closed.

    Cheers

    February 9, 2018 at 6:07 pm #910340
    Nikko

    Hi,

    Glad that Mike helped you. Thanks for using Enfold :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Remove breadcrumbs on tablet and mobile size screens’ is closed to new replies.