Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+1 vote
374 views
in Themes by
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.
Q2A version: 1.8.5 Snow Theme

2 Answers

+1 vote
by

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;
}

0 votes
by

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";
}

...