Changing the Main Menu Appearance OceanWP

Main Menu Appearance OceanWP
Share with friends

Table of Contents

Web Hosting from £19.95
Hosting plans come with enhanced server security and 24h automatic backups. Lightening fast speeds with SSL certificates included free with all our plans.
Written by Simon

Last Updated 24/12/2023

Changing the Main Menu Appearance OceanWP

To change the Main Menu Appearance OceanWP:

  1. Log into your back office
  2. Click Appearance in the left hand side panel
  3. Click Customise

This will open your website’s front end and Customise bar. Unfortunately, the OceanWP menu settings aren’t grouped together. You will need to change the typography and colour in separate locations in your customise bar.

Building a Main Menu with OceanWP

Editing the Main Menu Appearance OceanWP

Menu Typography

To change the menu typography, navigate to Typography>Main Menu. Here you can change all your Main Menu’s settings relating to typography, such as:

  • Font Family
  • Font Weight
  • Font Style
  • Text Transformation
  • Font Size 
  • Letter Spacing

Recommended Reading: Building a Main Menu

Main Menu Style

Now that we have the basic layout for our menu, let’s try and improve how it looks. Make sure you click Publish to save changes and the click the left arrow in the top corner to navigate back to the start of the Customise side editor. To change the Main Menu’s appearance Header>Menu. Here you can change settings such as:

  • Link Colour
  • Background Colour
  • Search icon appearance
  • Search Box appearance
  • Dropdown menu link colour
  • Dropdown menu background

Again, make sure to click Publish before navigating away.

he settings we used are as follows:

Typography

  • Font Family: Noto Sans
  • Font Weight: Bold: 700
  • Font Style: Normal
  • Text Tranform: Capatalize
  • Font Size: 15px
  • Letter Spacing (px): 0.9

Main Menu Style

Only listed edited values, the rest are set to default:

  • Position: Right
  • Main Styling 
    • Left/Right Padding (px): 15
    • Link Color: #e6007e
    • Link Color: Hover: #ff6700
    • Link Color: Current Menu Item: #ff6700
  • Dropdowns Styling
    • Width (px): 180
    • Background Color: #ffffff
    • Top Border Color: #ffffff
    • Link Color: #e6007e
    • Link Color: Hover: #ff6700
    • Link Color: Current Menu Item: #ff6700

Recommended Reading: Add a Website Icon

Web Hosting

From £19.95 /mo