Skip to content
Log in Sign up

Logo – how to change logo image and its size

Vehica takes the logo file from Basic Setup, but its size comes from the menu inside each layout. Here you will find where to upload the default and reversed logo, and how to set the logo height for desktop, tablet and mobile.

2 minute read

Upload your logo files

You can add your logo files in Basic Setup. You can also upload a Logo Reversed there, which can be used if you have pages with a dark or transparent menu, for better readability.

Vehica Panel > Basic Setup > Logo in wp-admin, with a "Default" box showing the logo on white and a "Reversed" box showing it on black, each with an ADD NEW LOGO button above SAVE ALL CHANGES

Open the layout that holds your menu

To change the logo size in the menu you will need to edit each layout you use.

Layout = header (menu) + <page-content> + footer

You can do it directly on your page (e.g. the “About us” page and most other pages use the “Dark Menu Layout”) this way:

WordPress admin bar on the About us page, where an arrow points to the “Edit Header & Footer (Dark Menu Layout)” link next to “Edit with Elementor”
The link names the layout the page uses, so you always edit the right one.

Or you can select it via the /wp-admin/ panel this way:

Vehica Panel > Layouts & Templates in wp-admin: the "Page layouts" list shows Empty Layout, Dark Menu Layout marked Default and Transparent Layout, with arrows pointing to the menu item and to the Edit button of the default layout

Change the logo height

  1. 1 Edit the menu

    Click the menu in the layout so Elementor opens the Edit Main Menu panel, and find Logo Height under General.

    Elementor's Edit Main Menu panel with General settings — Menu: Primary Menu, Menu Height (px): 100, Logo Height: 32 with its slider — and arrows pointing to the Logo Height field and to the logo in the header preview
  2. 2 Set the height you want

    Raise or lower the value, e.g. to 70. The header preview updates as you type.

    The same panel with Logo Height changed to 70, and the Vehica logo in the header preview now noticeably larger
  3. 3 Set the tablet and mobile size

    Use the responsive icon next to Logo Height and set the value for each device.

    Elementor switched to the narrow tablet/mobile preview — hamburger icon, logo and user icon in the header over a “Your page content will be displayed here” placeholder — with arrows pointing to the Logo Height control and to the logo
  4. 4 Click Update to save changes

    Nothing is applied to the live site until you do.

    Elementor's green UPDATE button in the bottom of the panel, with the mouse cursor on it

Repeat for your other layouts

If your website uses more than one layout (e.g. some homepages and the blog page use the transparent menu layout by default), edit the other layout and change it the same way again:

The Page layouts list in Layouts & Templates with an arrow pointing to the Edit button of the Transparent Layout row

Keep reading

How to customize header (menu colors, font-size etc.) How to change menu width?

Ask the people who build Vehica

We answer by email from support@tangiblewp.com. With Premium Support, we also fix your site when something breaks.

Send us a message What Premium Support covers 

We can also run your site for you, or build a new one.

Was this guide helpful?