- This topic has 9 replies, 3 voices, and was last updated 6 years, 9 months ago by Dylan Doskicz.
-
AuthorPosts
-
June 23, 2017 at 10:09 pm #118053Dylan DoskiczParticipant
Is it possible to change to look of the menu when in mobile display? I would like to change the font and the color.
Also is it possible to remove the dotted border when clicking on a menu link? Currently when a link is clicked there is a border signifying that the link was clicked.
June 24, 2017 at 3:28 am #118062PratikKeymasterHi @dosk,
if djdosk.com is your site, then a power button comes as mobile menu. Did you change it, let me know if you have another url.
Regards,
PratikJune 24, 2017 at 3:46 am #118064Dylan DoskiczParticipantI’m sorry, its for a different url.
June 25, 2017 at 2:38 am #118097MaheshKeymaster@dosk: For changing menu color, go to Dashboard=> Appearance=> Customize=> Color Options=> Primary Menu Color Options.
For removing the dotted border and change font, go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS:
/* Change font family */ .main-navigation a { font-family: "Times New Roman"; } /* Remove dotted border */ #menu-toggle:focus { outline: 0 }
Note: Please use your desired font family.
Regards,
MaheshJune 25, 2017 at 2:07 pm #118104Dylan DoskiczParticipantThanks for your replay Mahesh.
Changing the “Primary Menu Color Options” only changes the colors of the menu when in desktop mode. I would like to change the colors of the menu when its in a mobile display. Currently its a button with a white background with black text. I would like to change the background color and text.
June 25, 2017 at 2:09 pm #118105Dylan DoskiczParticipantI am also still seeing the dotted border after adding the custom CSS.
June 26, 2017 at 12:09 am #118112MaheshKeymaster@dosk: Add the following CSS for color:
#menu-toggle { background-color: #fff000; color: #ff00ff; }
I just checked your site and the dotted borders are now gone.
Note: Change the colors as desired.
Let me know if any problem.
Regards,
MaheshJune 27, 2017 at 4:54 pm #118219Dylan DoskiczParticipantThanks for the reply. The code you gave me for the mobile menu worked great.
Im still seeing the border around links after they are clicked even after I added the code you gave me. I also tried this code with no luck:
a {
outline: 0;
}Any ideas?
June 28, 2017 at 12:16 am #118237MaheshKeymaster@dosk: Okay with that image, finally understood where your problem was, thanks for the clarification. Please add the following CSS:
a:focus { outline: 0; }
Regards,
MaheshJune 28, 2017 at 2:17 pm #118272Dylan DoskiczParticipantThank you Mahesh!
-
AuthorPosts
- The topic ‘Change Mobile Menu Button Styling’ is closed to new replies.