[Dylan Doskicz]

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.

[Pratik]

Hi @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,
Pratik

[Dylan Doskicz]

I’m sorry, its for a different url.

http://toppresskits.com/artists/alarmforwar

[Mahesh]

@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,
Mahesh

[Dylan Doskicz]

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

[Dylan Doskicz]

I am also still seeing the dotted border after adding the custom CSS.

[Mahesh]

@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,
Mahesh

[Dylan Doskicz]

Thanks 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?

[Mahesh]

@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,
Mahesh

[Dylan Doskicz]

Thank you Mahesh!

[Author]

Posts