WordPress.org

Forums

Coeur
[resolved] Mobile Menu Not Displaying, Error in CSS (15 posts)

  1. CrouchingBruin
    Member
    Posted 7 months ago #

    The mobile menu is not displaying on mobile devices. The problem is with this media query in the blog.css file:

    @media (max-width: 769px) {
      .navbar, .navbar-default {
       display: none;
    }

    The navbar should not be hidden because it contains the mobile menu.

  2. Frenchtastic
    Member
    Theme Author

    Posted 7 months ago #

    Hi,
    Hiding the menu on mobile devices was actually intended as it seems to me that mobile websites do not need all functionalities available on desktop version since mobile users won't wonder around but will only read the posts.
    I realize it is NOT always true, I'll fix this issue in the next theme update menu will be shown and there will be a new option allowing people to hide menu on mobile devices.

    Thanks for your feedback.
    Cheers!

  3. Frenchtastic
    Member
    Theme Author

    Posted 7 months ago #

    Hi,

    A new update is now available, it includes a new menu for mobile devices. It is a different one than the one displayed on desktops in case you do not want to have the same menu on both devices.
    Simply set it up from menu options in appearances > menu

  4. CrouchingBruin
    Member
    Posted 7 months ago #

    Thanks very much, the mobile menu is now being displayed. Having the option to use a different menu for the mobile menu is a plus.

  5. eleclerc8
    Member
    Posted 7 months ago #

    Hi, since the update, the mobile menu and regular menu BOTH appear on the desktop version which is pretty frustrating. Am I doing anything wrong? If I select no mobile menu, I end up with 2 search bars

    thanks!

  6. eleclerc8
    Member
    Posted 7 months ago #

    Hi, since the update, the mobile menu and regular menu BOTH appear on the desktop version which is pretty frustrating. Am I doing anything wrong? If I select no mobile menu, I end up with 2 search bars

    thanks!

  7. Frenchtastic
    Member
    Theme Author

    Posted 7 months ago #

    Hi,
    That's probably because of your web browser.
    Please try to empty your cache.

    Let me know if it works.
    Thanks

  8. eleclerc8
    Member
    Posted 7 months ago #

    I've tried 3 browsers and clearing my cache and I still see 2 search bars
    http://www.emilyleclerc.com

  9. Frenchtastic
    Member
    Theme Author

    Posted 7 months ago #

    Oh ok I see what's the problem there.
    Did you edit your css files at all? Maybe tweaked coeur a little bit? Your stylesheet is somehow missing this following part:

    .mobile-menu{
        display: none;
    }
    
    .mobile-search{
      margin-top: 8px;
      float: left;
    }
    
    .mobile-toggle .navbar-header{
      display: inline-block;
    }

    You can either:
    - reinstall coeur which shouldn't take too long (Which I recommend)
    or
    - edit your css files to add this part. (line 321 - blog.css in framework/css)

  10. eleclerc8
    Member
    Posted 7 months ago #

    you are a life saver, thank you for your quick response! I must have accidentally deleted that when I was trying to adjust a few things to my liking.

  11. Frenchtastic
    Member
    Theme Author

    Posted 7 months ago #

    Happy to help anytime :)

    All your photos look really good by the way.
    Also feel free to remove my credits in the footer area.

  12. eleclerc8
    Member
    Posted 7 months ago #

    Thank you! I am really liking the theme, very customizable and easy to use.
    However, I think I might have also deleted another bit of code the other day because (and I thought your suggestion above would solve this but alas it has not) I don't see the menu on the mobile version.

    I would reinstall the theme but I've modified a lot of the character sizes and spacing - along with the frame width. And since I do a lot of trial and error, I am not sure I could reproduce it without screwing anything else up ;)

    thanks for your help!

  13. Frenchtastic
    Member
    Theme Author

    Posted 7 months ago #

    Hi,
    This one is on my part, there's a little bug which will prevent the mobile menu from displaying if a certain option is not set to true.

    Here is a quick fix:
    Appearances > Customize > Menu and set "Display menu on single post pages" to yes.

    I'll fix this in the next theme update.

  14. eleclerc8
    Member
    Posted 7 months ago #

    hmmm that doesn't seem to solve the problem. I still don't see a menu in mobile

  15. Frenchtastic
    Member
    Theme Author

    Posted 7 months ago #

    My bad that's not an actual issue the option works just fine.
    However this is why the menu is not showing up on mobile devices:

    add this in your blog.css stylesheet (line 1113)
    it somehow got deleted in your install.

    .mobile-menu{
        display: block !important;
    }

    PS: also this following rule should not be in this @media section.

    .blog-header {
        margin-bottom: 20px;
        border-bottom: 1px solid #ececec;
    }
  16. helencoupland
    Member
    Posted 6 months ago #

    I'm using coeur on this site http://hackneysingers.org.uk/ and would like to show a mobile menu as it doesn't currently have one. I don't want to update the whole theme as I modified it quite a lot. Can anyone help me with which bits of code to add/ modify?
    Would it be just the header.php and blog.css files?

Reply

You must log in to post.

About this Theme

About this Topic