The following tutorial explains how you can select your Menu and Logo positions/styles with Vivi.

Once the Menu Navigation has been created, go to Flothemes – Header & Logo – Menu & Logo Position. Here you can adjust:
– Logo Position
– Menu Style
– Menu Hover Type
– Mobile Options
– etc.

Step 1 – Logo Position

1. Logo left aligned
2. Logo center aligned

Step 2 – Menu Style

1. Menu bottom left, always visible as per the demo
2. Menu top left, hidden with burger menu
3. Menu center – inline, one line from left to right
4. Menu Top – above the page content

Step 3 – Mobile Logo Position

1. Logo over the Image Slideshow
2. Logo above the Image Slideshow

Step 4 – Sub Menu Colors

You can select the sub menu hover background color, and the hover color of the text.

Step 5 – Content Padding Width

Here you have the option to select the padding left and right for your content. The padding is in % of the screen size. I wouldn’t recommend using padding larger the 25% of the screen width.

Other Options Include:

– Distance Between Menu Items
– Enable/Disable Sticky Header
– Sticky Menu Background Color
– Logo Container Width
– Menu Hover Types
– Inline Menu Hover Direction

Step 6 – Save Updates

Always remember to save updates when making changes to your site.

Go to Flotheme – Header & Logo – Logo & Sizing

There are two types of Logos you can use: Text and Image Logo.

1. Text Logo

When selecting a Text Logo option, the Logo that will appear is your website title.
You can change the Website Title by clicking the link in the highlighted yellow area. Or you can manually go to Settings – General and adjust the Website Title there.

NOTE! This will also be the name that you see in the browser tab.

There are also a few other important settings to be aware of, such as:
Logo Width on Desktop and Mobile Devices

Font Color – please note that there is an option to have the Logo color change automatically based on the Slideshow image colors. This option is convenient if you have a mixture of dark and light images in the same slideshow and a single color Logo will not work for all images. You can set two different colors for light and dark images.

Font Types – where you can select the Font Family, Font Types, Font Size, Letter Spacing, etc.

2. Image Logo

This will be the most commonly used option. Here you can upload your own .png or .jpg file. It is recommended to use a .png file with a transparent background.

Here you can also set different Logo widths for Desktop and Mobile devices.

The following section includes only two options:
1. Enable Search?
2. Enable Social links?

In the following section you will find all the Typography settings related to the Menu only.
Settings will include:
Menu / Submenu Typography
Menu / Submenu Font Colors
Menu / Submenu Background Colors
Enable uppercase menu items? – YES/NO
Mobile Menu Button Type
etc.