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

  • Author
    Posts
  • #3056443

    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.

    #3056702

    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

    #3056703

    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!

    #3056709

    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

    #3056710

    Hey Rob,

    No problem, glad I could help!

    Have an awesome day :)

    #3056715

    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

    #3056716

    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!

    #3056730

    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

    #3056732

    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

    #3056735

    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

    #3056752

    @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.

    #3056788

    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

    #3056789

    kathrynwp
    Staff

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

    Creation to New Creation a Bible Overview a Bible survey and resource centre

    #3056790

    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

    #3056791

    kathrynwp
    Staff

    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.

    #3056792

    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 360×640). The browser is Chrom 63 on Android (Lollipop) and is reported as up-to-date.
    With many thanks, Rob

    #3056793

    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

    #3056794

    kathrynwp
    Staff

    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;
    }
    #3056795

    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

    #3056796

    kathrynwp
    Staff

    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!

The topic ‘Menu down arrows to indicate submenu – colour cannot changed on mobile’ is closed to new replies.