[Pos baru] How to Style a Custom CSS WordPress Menu

Pos : How to Style a Custom CSS WordPress Menu
URL : http://wordpress.com/2018/04/10/how-to-style-a-custom-css-wordpress-menu/
Ditulis : 10 April 2018 pukul 3:00 pm
Penulis : Brenda Barron
Tag : Editing, Formatting, How To, Pages, Themes
Kategori : Web Design

When it comes to creating great user experiences, your navigation menu plays a crucial role. It helps visitors see and access different areas of your website.

As such, it's important for your navigation menu to look and behave in the way that you want it to. If you have a WordPress.com site on the Premium or Business plan ( https://wordpress.com/pricing/ ) , you have the ability to add custom CSS ( https://wordpress.com/go/web-design/what-is-css/ ) . Here's how you can create a custom menu using CSS so visitors can navigate your site with ease.

Create a custom CSS WordPress menu background
To change your menu's background color, click My Sites > Personalize > Customize. Once the Customizer screen loads, click CSS.

Right-click on your navigation menu and choose Inspect. An Inspector panel will appear at the bottom of your screen, where you can view your website's underlying code. The left-hand side will reflect the HTML whereas the right-hand side will display the CSS code ( https://en.support.wordpress.com/custom-design/editing-css/ ) that you need to modify.

https://wpcom.files.wordpress.com/2018/09/sw-591936.jpg

Look for your theme's CSS ID or the class that your theme uses for the container that surrounds your navigation menu. This is the code you need to use to modify the background color. In one example, the code looks like this:

.main-navigation {background-color: #012e43;}
In the screenshot below, notice that the background color of the menu is now dark blue.

https://wpcom.files.wordpress.com/2018/09/sw-591937.jpg

Change font colors
Changing your menu's background color can make your menu items harder to read. You'll want to adjust the font color of your menu items and links to ensure that visitors can still see them. You can do so with the following code:

.main-navigation li.menu-item a {color: #fff;}
Style a single menu item
If you have a page that you want to drive visitors to (such as a "Hire Me" page), you can style it differently to make it stand out.

First, add a CSS class ( https://en.support.wordpress.com/advanced-menu-settings/ ) to the menu item that you want to style. Navigate to the Customize section, click Menus, and then click on the cogwheel icon and check the box next to CSS Classes.

https://wpcom.files.wordpress.com/2018/09/sw-591938.jpg

Publish the changes and then select the menu that you're styling. Click the menu item you want to style and, in the CSS Class, enter a short name like ".custom" or ".cta." Publish the changes and then go back to the CSS section within the Customizer.

[inline-image4]

From your website's page, right-click on the menu item that you want to change and use the Inspect tool to locate the code. You can then use the following code to modify its appearance:

.custom {border: 2px solid #b4dff8;border-radius:3px;}
Add hover effects to menu items
You can also add hover effects to your custom CSS WordPress menu items. To do so, use the following code:

.custom:hover{background-color:#b4dff8;}
In this example, the appearance of the custom link when it's hovered over is being altered, but you can also use it for any other menu item by replacing the ".custom" class with the following: li.menu-item a:hover.

https://wpcom.files.wordpress.com/2018/09/sw-591940.jpg

Make your navigation menu pop with custom CSS
Proper website navigation will ensure that your visitors have an easier time locating your content and services, which makes them more likely to stay on your site for longer periods of time ( https://wordpress.com/go/web-design/keep-visitors-on-your-site-longer-with-three-tactics/ ) . Use the tips above to distinguish your menus and provide the best possible user experiences.

--
WordPress.com | Terima kasih karena terbang bersama WordPress!

Kelola Langganan
https://subscribe.wordpress.com/?key=ef7902ba1ee3b86f43e7ffc017117508&email=jabatek77.internet%40blogger.com

Berhenti berlangganan:
https://subscribe.wordpress.com/?key=ef7902ba1ee3b86f43e7ffc017117508&email=jabatek77.internet%40blogger.com&b=FoEL9RdGOPoysMvm61A4ec19Bf-lpg5es8JqyLF5CEIE4xWRJpFZUDWH6_O-F95wNgjVj5M_ph7ki6Il8QS2Pcl6GDA4oJkG4ThB0OVhk9h93A%3D%3D