- This topic has 15 replies, 4 voices, and was last updated 3 years, 3 months ago by David.
-
AuthorPosts
-
November 30, 2020 at 7:45 am #1558675Nick
Hi – I would like to tab in by 5 pixels the secondary menu options as shown here: https://ibb.co/zHx2tfP
Could you please advise best way to achieve this?
thanks
November 30, 2020 at 12:48 pm #1559174LeoStaffCustomer SupportHi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know 🙂
November 30, 2020 at 2:21 pm #1559318Nickthanks, see below
November 30, 2020 at 10:02 pm #1559734ElvinStaffCustomer SupportHi,
Thank you for providing the link.
Hi – I would like to tab in by 5 pixels the secondary menu options as shown here: https://ibb.co/zHx2tfP
Could you please advise best way to achieve this?
I’m not exactly sure what you mean by “tab”. Did you mean indentation on the sub menu items?
If so, you can add this CSS:
.main-navigation.toggled .main-nav ul ul.toggled-on li { margin-left: 5px; }
If you also want to copy the “rounded edges” effect similar to the image, you can add this:
.main-navigation.toggled .main-nav ul ul.toggled-on { border-radius: 5px; }
December 1, 2020 at 1:08 am #1559921NickThanks – that does the job perfect.
Could you also let me know how to change the background colour and font colour of this sub menu, just in mobile widths? The colour setting in customiser is for desktop/mobile combined.
December 1, 2020 at 6:36 am #1560341DavidStaffCustomer SupportHi there,
add this CSS to change the submenu colors:
@media (max-width: 768px) { .main-navigation .main-nav ul ul, .main-navigation .main-nav ul ul li a, .main-navigation .main-nav ul ul li:hover a { background-color: #f00; color: #fff; } }
December 1, 2020 at 9:41 am #1561311NickThanks David – that works, however one issue….at the bottom of the submenu on mobile widths there is a horizontal line, can this be removed? See link below
December 1, 2020 at 11:19 am #1561729LeoStaffCustomer SupportTry this CSS:
@media (max-width: 768px) { .main-navigation ul ul { box-shadow: none; } }
December 1, 2020 at 12:03 pm #1561879NickThanks Leo – that worked fine thanks. There seems to be a last issue as follows – See the following link in mobile screen width and expand the main “About” menu. You will see “About Us” is in grey….it should be in the background blue colour. Have tried an :active css selector but doesn’t seem to work. Any thoughts would be appreciated.
December 1, 2020 at 3:39 pm #1562345ElvinStaffCustomer SupportYou will see “About Us” is in grey….it should be in the background blue colour. Have tried an :active css selector but doesn’t seem to work. Any thoughts would be appreciated.
I believe you can set this up on Dashboard > Appearance > Colors > Primary Navigation and set the Sub menu item’s “Background Current” color to your preference.
December 1, 2020 at 3:52 pm #1562370NickThanks Elvin – however I am trying to fix the issue in mobile screen widths only (desktop screen widths appear just fine). To restate the issue…
In mobile screen widths, click the link below and expand the main “About” menu. You will see “About Us” is in grey….it should be in the background blue colour.
December 2, 2020 at 12:21 am #1562949ElvinStaffCustomer SupportThanks Elvin – however I am trying to fix the issue in mobile screen widths only (desktop screen widths appear just fine). To restate the issue…
In mobile screen widths, click the link below and expand the main “About” menu. You will see “About Us” is in grey….it should be in the background blue colour.
To clarify: You’re trying to expand the sub menu items within the header area only?
December 2, 2020 at 1:48 am #1563114NickNo, I need the colour of the active background changing.
To reiterate:
1) Visit the link below
2) Reduce screen width to mobile width
3) Click hamburger icon
4) Click “About”
5) The grey menu bar highlighting on the word “About us” needs changing to blue and only in mobile screen widthsI have also provided a screenshot of the problem.
Hope this is clear.
Thanks!
December 2, 2020 at 3:11 am #1563308DavidStaffCustomer SupportHi there,
try adding this CSS:
@media(max-width: 768px) { .main-navigation .main-nav ul ul li[class*="current-menu-"] > a { background-color: #2ea3f2; } }
December 2, 2020 at 3:15 am #1563318Nickthanks David – perfect!
-
AuthorPosts
- You must be logged in to reply to this topic.