Button in header part of the page

Question

Hello

Is there any option to add to main menu in header part of Q2A website my own button with my own icon which would lead to specific url?

Thanks in advance for any help.

Answer 1

You can't normally add a button (in HTML language), but you can add a link and stylize it as a button.

To add an extra link to the main menu, log in as admin, and move to Pages tab, and you can add extra links there to point to any page or external website.

To stylize a link like a button and to create an icon in front of it, it requires some CSS jobs.

Each extra link will have a CSS class like this:

.qa-nav-main-custom-1 .qa-nav-main-link

.qa-nav-main-custom-2 .qa-nav-main-link

.qa-nav-main-custom-3 .qa-nav-main-link

.qa-nav-main-custom-4 .qa-nav-main-link

......

An icon can be a special Unicode character, a codepoint in conjunction with a specific font, or an image.

Example:

.qa-nav-main-custom-11 .qa-nav-main-link::before {
    content: "pets";
    color: crimson;
}

qa-nav-main-link::before {
    font-family: "Material Icons";
    font-size: 24px;
    position: absolute;
}

Answer 2

For your own link : go to https://your-site/admin/pages & on bottom => Add link

If you would use Font-Awesome :
Open your qa-style.css (in theme folder on your ftp)
Search : .qa-nav-main-custom-1 .qa-nav-main-link:before
Replace:  

.qa-nav-main-custom-1 .qa-nav-main-link:before {
font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0ca";
}

.qa-nav-main-custom-2 .qa-nav-main-link:before {
font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f128";
}

.qa-nav-main-custom-3 .qa-nav-main-link:before {
font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f07c";
}

.qa-nav-main-custom-4 .qa-nav-main-link:before {
font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f042";
}

/* DISCORD*/
.qa-nav-main-custom-5 .qa-nav-main-link:before {
font-family: "Font Awesome 5 Brands"; font-weight: 900; content: "\f392";
}

/* DONS */ 
.qa-nav-main-custom-6 .qa-nav-main-link:before {
font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f4c0";
}