Changing the design of the site header

[mehadihasan123456]

Go to the "Appearance" - "Customize" section, and on the next page, open the "Header" section.

WP store: section "Appearance" - "Customize", subsection "Header"

This section will have four subsections: "Site Identity", "Main Header", "Main Menu" and "Transparent Header". Let's take a brief look at each of them.

Site Identity. Here you can change one of the variations of the logo on the site, namely the black logo that is displayed on the store page where the header is opaque. The white logo with a transparent header will philippines email list be in another section.

Also in this section you can set a favicon - an icon that is displayed in the browser tab. And at the end of the section there will be fields that will add the name and a short description of the site to the header.

Main header. Here you can choose one of three options for the placement of the logo and elements in the menu: logo on the left, right or center.

You can also make the content in the header stretch across the entire width of the screen or have small indents on the sides. At the end of the section are fields for setting the size and color of the bottom border of the header.

Main menu. Here you can disable the menu, and also replace the icon with a basket on the right with something else: search, a button, a custom link or a widget.

There will also be settings for the appearance of drop-down lists that appear when you hover over an element in the header. You can change the thickness and color of their borders, as well as select a different type of animation.

In addition, there will be settings for the menu on mobile devices. For example, "Menu breakpoint" is the screen width at which the standard menu is rebuilt to mobile.

There are three icons on the sidebar at the bottom: computer, tablet and smartphone. With their help, you can view your site as if from different devices. Switch to the smartphone and move the switch in the line with the breakpoint completely to the left. Instead of a compact menu, you will see one like when viewing the site from a computer.

Transparent header. Here you can turn off the transparent banner, as well as change the white logo that is visible on the main page, as well as the page with information about the store and contacts.

This section will also contain detailed settings for the appearance of the transparent plate. With their help, you can change the appearance of links in the menu and the design of drop-down lists. You can even adjust the transparency of the plate.

For example, by default, the links in the menu are not completely white, but slightly grayish. They only turn white when you hover over them. This is an interesting move, but on my demo site I did the opposite. So that by default the text is white, and when you hover over it, it turns grayish.

If you want to do the same, click the pencil icon under the Menu item, then swap the Link/Text Color and Active/Hover Color. For the changes to take effect, be sure to click the Publish button at the top of the page.