Support » Theme: Edin » Can I solve 3 navbar niggles with CSS?

  • l3ttie

    (@l3ttie)


    Three minor navbar niggles:

    I have changed the background colour of my navbar using CSS.

    1.When I hover on level-2 menu items, the background colour for the parent menu item reverts to default blue, how do I select this to alter with CSS?

    2. I’m having trouble changing the colour of the tiny blue arrow/triangle between level-1 menu item and its (open) drop-down sub-menu. Using Safari Web Inspector, this appears to be the correct selector and attribute:

    .navigation-classic .primary-navigation ul ul:before {border-bottom: 8px solid transparent;}, but making this CSS edit doesn’t work.

    3. How can I stop “sub-sub-menu” items disappearing off the right-hand side of the viewport using CSS? Is it possible to make level-3 menu items (just the ones below parent menu items on the right-hand side of the page) appear to the left of the level-2 menu instead?

    Thank you

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi @l3ttie,

    When I hover on level-2 menu items, the background colour for the parent menu item reverts to default blue, how do I select this to alter with CSS?

    I’ve checked the second level menu links and I’m not see any blue backgrounds so it looks like you’ve got this sorted now.

    I’m having trouble changing the colour of the tiny blue arrow/triangle between level-1 menu item and its (open) drop-down sub-menu.

    I’m not see any blue which suggests you were able to fix that too 🙂

    How can I stop “sub-sub-menu” items disappearing off the right-hand side of the viewport using CSS?

    I see you what you mean — the third level links are cut off in Other IR Topics > Cold War. From what I can tell, this behaviour appears to be a bug so I’ve reported it here:

    https://github.com/Automattic/themes/issues/368

    hi

    Thanks for your reply, and for reporting the bug that makes level-3 menus spill out of the viewport.

    While I have managed to change the colour of the blue arrow that joins the level-2 menu to the menu bar, I haven’t managed to re-format the blue arrow that connects the level-3 menu to the level-2 menu. It’s visible, for example, when you over on the “Other IR Topics” menu item, and then go down to hover on “Cold War”. The blue arrow/triangle is visible between the level-2 menu item “Cold War” and the box containing its child menu items.

    I know it’s minor but it’s niggling me! Any ideas?

    Thanks!

    Hi @l3ttie,

    I haven’t managed to re-format the blue arrow that connects the level-3 menu to the level-2 menu.

    Please try adding the following CSS:

    .primary-navigation .dropdown-toggle:hover {
        color: #484848;
    }

    #484848 is grey but can be changed to any colour you like.

    Does that help?

    Hi Gemma

    Thanks so much for your reply. Unfortunately it didn’t work. I can tell you what worked to change the arrow between the Level-2 and Level-1 menus, and maybe you’ll have a better clue than me as to what will work!

    .navigation-classic .primary-navigation ul ul:before{
    border-bottom: 8px solid #808080 !important;
    }

    Don’t ask me how I arrived at that! It was a mix of wading through Safari Web Inspector and cobbling together other related suggestions from elsewhere on this forum! I never would have arrived at this alone!

    Thanks again!

    Hi @l3ttie,

    I’ve had another look at your site and can’t see any blue arrows between the second and third level menu links (on desktop or mobile):

    Screen Shot 2018 11 22 at 13 07 11

    Have you got this sorted or do you still need help making tweaks? If you are seeing something different, would you be able to make a screenshot and upload to a service like Snaggy so I can take a look?

    Hi, sorry, I missed your message.

    I’ve uploaded a screenshot of the open menu to Snaggy to show you the little blue arrow …https://snag.gy/JHRWY6.jpg

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Can I solve 3 navbar niggles with CSS?’ is closed to new replies.