Need help? Check out our Support site, then


Menu down arrows to indicate submenu - colour cannot changed on mobile

  1. journeyingthroughthebible
    Member

    Hi I have changed the background colour of my menu (I use the TwentyTwelve Theme) to navy, with maroon on mouse over. The text has been changed to white. On the computer screen, the little down arrows that indicate the presence of a submenu are also in white, like the text (as expected). However on my mobile, they remain black (the default, I guess). So they don't show up clearly on a dark background. Can they be changed to white, please? The code I am using in my CSS is as follows:
    /*menu main colour*/
    .navigation-top ul {
    background-color: navy;
    }

    /*submenu main colour*/
    .navigation-top li {
    background-color: navy;
    }

    /*main menu and submenu text colour*/
    .navigation-top a {
    color: white !important;
    }

    /*main menu and submenu background colour on mouse-over*/
    .navigation-top li a:hover {
    background-color: maroon;
    }

    /* submenu item border elimination*/
    .navigation-top ul {
    border: 0 !important;
    }
    With many thanks, Rob

    The blog I need help with is creationtonewcreation.com.

  2. Hi Rob,

    I have tested it out on my inspector and this CSS code seems to work:

    .icon {
        display: inline-block;
      <strong>  fill: white;</strong>
        height: 1em;
        position: relative;
        top: -0.0625em;
        vertical-align: middle;
        width: 1em;
    }

    The bold is what I have changed and seemed to work.

    Please check all the pages & blog post on every device to confirm it is not impacting anything else.

    Hope this helps!

    Cheers :)

    Ally

  3. Ah yes - seems my "bold" didn't work in the code. But as you can see whatever is within the tabs is what I changed.

    Sorry for any confusion that may have caused!

  4. journeyingthroughthebible
    Member

    Hi okanagancreativedesigns
    Brilliant! This works fine. Thank you for this, this is much appreciated.
    Will check, as you suggest, for any impacts on other issues, and will report back if any.
    Once again, many thanks, Rob

  5. Hey Rob,

    No problem, glad I could help!

    Have an awesome day :)

  6. journeyingthroughthebible
    Member

    Hi okanagancreativedesigns
    Yes, I've just noticed that the 'hamburger' icon next to the word 'Menu' on the mobile view has also gone white, which means that on the white background, it can't be seen. I could make this element a light grey, meaning you can see the down arrows well enough, but the hambuger icon appears visible. Alternatively:
    1 Is there a way of reversing out the Menu button, so the background to the button is black and 'Menu' is white, and the hamburger icon then appears clearly in white alongside.
    2 Or can the hamburger icon colour be separately defined?
    One other point: the dark menu I have created looks great (more interesting and eyecatching than a white one, I think). But - on the full computer screen view (not mobile) - is there any way of making the blue menu background stretch right from left screen margin to right screen margin, to match the width of the header immediately above(which fills the screen left to right)?
    With many thanks again, Rob

  7. Hi Rob,

    We can change the color of the "hamburger" icon to black also like so.

    .menu-toggle .icon {
        margin-right: 0.5em;
        top: -2px;
        fill: black;
    }

    But if you wanted to have your nav background black and your "Menu" and "Hamburger" Icon white you could try this:

    To create a black background in the Nav Bar:

    .main-navigation {
        clear: both;
        display: block;
        background-color: black;
    }

    To create a white "menu" toggle:

    .menu-toggle {
        color: white;
    }

    Let me know how those work!

  8. journeyingthroughthebible
    Member

    Hi okanagancreativedesigns
    These CSS codes work great, thank you so much for this. I have, in fact, defined the menu background to be the dark blue that the dropdown menu goes to, which matches the header better and provides a more seamless visual effect. I think this menu adaptation (in user-defined colours, of course) could prove quite popular, as on my mobile is looks really great.

    The only issues I have now are these:
    (1) when viewing on the computer screen, the menu (which is also dark blue, of course) would look much better if it could stretch right across the screen under the image (just like the mobile menu stretches right across the screen under the header). I will investigate this, and see if I can find anything.
    (2) If the header image on my home page could have the option of being the same (i.e. smaller, and better proportioned) as the headers on all the other pages. I have started another thread last night on this, and a staff member @thesacredpath may be looking at this now. But if you had any thoughts, I would be grateful.
    With many thanks for all your help, Rob

  9. journeyingthroughthebible
    Member

    Hi
    I have solved the issue of the menu web stretching across the screen when viewed on a computer screen. I found the solution on a website http://www.karavadra.net, run by Bharat Karavadra.
    Here is my solution:
    /*widen menu to stretch across computer screen */
    .navigation-top .wrap {
    padding-right: 0px;
    padding-left: 0px;
    max-width: 100%;
    }
    This works great.
    So the only issue outstanding is the home page menu size.
    Many thanks, Rob

  10. journeyingthroughthebible
    Member

    Postscript - it is particularly the home page header on the mobile that's the issue, not the computer screen. On the mobile, the header takes up nearly all the screen. I'll let you know if @thesacredpath has a solution to this.
    Many thanks, Rob

  11. @journeyingthroughthebible, please don't post the same question in several threads as it causes extra work for staff and the volunteers. See my response in the other thread on the header issue. Many thanks in advance.

  12. journeyingthroughthebible
    Member

    Hi okanagancreativedesigns (or anyone else who could help on this)
    Returning to the issue of the Nav Bar and menu toggle on Twenty Seveteen for mobile devices, there's just one other issue. When clicking the hamburger menu, a white border appears around the hamburger icon and text 'menu' next to it. On a dark background this shows up clearly, and the screen would look better/neater without it. It seems to be controlled by the colour of the hamburger menu and text 'Menu' next to it.
    Is it possible either to eliminate this border, or make it the same colour as the background (so it won't appear?), without impacting the colour of the hamburger icon and text .Menu'?
    The CSS I am currently using is as follows.

    /*define colour of background in the Nav Bar of mobile device*/
    .main-navigation {
    	clear: both;
    	display: block;
    	background-color: #001c50;
    	}
    /*define colour of menu toggle of mobile device*/
    .menu-toggle {
    	color: white;
    }

    Many thanks, Rob

  13. Hi Rob, just so I'm clear, can you confirm that it's all these lines you're trying to remove?

    https://cloudup.com/c_sNVkPGLDR

  14. journeyingthroughthebible
    Member

    Hi kathrynwp
    Thanks for your reply.
    No, it's the white rectangular border around the x Menu at the top of the menu. I can't see it on your screenshot, but it appears on my mobile when I press it to display the menu, and remains in view when the menu is displayed.
    So I'm seeing what's on your screenshot, but with a white rectangular border around x Menu (for clarity, the top of this border merges with the thin white line between header and menu area). This border also remains in view after pressing it again to close the menu, so what I see is = Menu with a white rectangular border around it (again, the border merges with any white space above and below).
    However, if I click any of the menu items, and open any of the pages they relate to, this white border disappears. It then appears if I repeat the initial steps above.
    I also see the white lines you have pointed out. If there was, in fact, a simple way of removing these too, that would also be useful to know.
    Removal of these various lines would 'declutter' the menu and would look good.
    Many thanks, Rob

  15. I also see the white lines you have pointed out. If there was, in fact, a simple way of removing these too, that would also be useful to know.

    This should do it:

    .main-navigation li {
      border-bottom: 0;
    }

    Thanks for explaining where you're seeing the border around the menu toggle. I'm not seeing it at this end in Safari on my iPhone 5s, and I don't see anything obvious in the code.

    I wonder if what you're seeing is something specific to your operating system and/or device. To troubleshoot further, could you please tell me the following:

    Could you also upload a screenshot. Here's a guide on how to make one.
    http://en.support.wordpress.com/make-a-screenshot/

    You can upload the screenshot - in a graphic format like JPG, PNG, or GIF - in your Media Library, and provide a link so I can see it, or upload it with a service like Imgur or Snaggy.

  16. journeyingthroughthebible
    Member

    Hi kathrynwp
    The code to eliminate the lines worked perfectly. Thank you for this.
    Here's a screenshot upload of the border around the the menu toggle:
    https://creationtonewcreation.files.wordpress.com/2018/01/screenshot_betts_samsung_note_3.png
    I'm using a Samsung Note 3, device code SM-N9005. The operating system is Android 5 (Lollipop) (available screen size 360x640). The browser is Chrom 63 on Android (Lollipop) and is reported as up-to-date.
    With many thanks, Rob

  17. journeyingthroughthebible
    Member

    Hi kathrynwp
    Just an update - the white border also shows up when viewing the admin screen, and clicking the mobile device icon at the bottom left, too. Here's the link to a screenshot: https://creationtonewcreation.files.wordpress.com/2018/01/betts_menu_border_-in_admin_view.png
    To clarify: the menu icon border appears whenever the mouse is clicked when the cursor is within the menu icon border. It disappears whenever the mouse is clicked when the cursor is outside the menu icon border.
    Many thanks, Rob

  18. Thanks for all that additional info. I've narrowed down the culprit; it's the focus style that's causing that line in Chrome, but not other browsers as far as I've seen.

    This custom CSS should change it to a dotted line instead of a solid one. A focus style is needed to keep the site accessible to people navigating your site with a keyboard instead of a mouse, trackpad, or touchscreen.

    .menu-toggle:focus {
        outline: thin dotted;
    }
  19. journeyingthroughthebible
    Member

    Hi kathrynwp
    Yes, this worked perfectly, thank you for all your help.
    I have just one more minor thing that I'd like to customise for the menu, if possible (apologies for so many questions). [But should I post this on another question, I wonder?] For now, this is the query:
    I have found out how to reduce the height of the menu items on a computer screen thus:

    /*define height of main menu items*/
    .main-navigation a {
        padding: 10px;
    }

    This compresses the menu a bit, and looks better. But can you define the top/bottom padding separately from the left/right padding for the main menu items? If so, I'd be glad to have the CSS code.
    Also, I have tried and failed to do the same compression on the submenu items that display on dropdown (they still look a bit spaced out vertically). What code would be needed here (if it's possible).
    Many thanks, Rob

  20. Yes, this worked perfectly, thank you for all your help.

    Super!

    But can you define the top/bottom padding separately from the left/right padding for the main menu items?

    Yes, you can do that in a few different ways. You can define padding for each side separately, or combine them in different ways. This is a good guide:

    https://developer.mozilla.org/en-US/docs/Web/CSS/padding

    But should I post this on another question, I wonder?

    It would actually very helpful if you wouldn't mind starting a new thread for new questions. So feel free to have a look at the padding guide above, and then start a new one for your next question. Thank you!

  21. journeyingthroughthebible
    Member

    Hi kathrynwp
    Thanks again for this - using this guide, I have now set the padding for each of the four sides of the main menu items (but not the submenu items) independently. I have now posted the final question on a new thread under the title padding of submenu items in Twenty Seventeen theme. Once again, thank you for all your help, I really appreciate this. Rob

  22. Glad you were able to make that change, and someone will get to your other thread soon. Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic