# Come usare l'HTML dell'intestazione del brand nel mio sito WordPress

**URL:** https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859
**Category:** Support
**Created:** [8 Luglio 2018, 2:42pm UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859 "2018-07-08T14:42:16Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![bekircem](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bekircem/32/44582_2.png) [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [8 Luglio 2018, 2:42pm UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859/1 "2018-07-08T14:42:16Z")

</div>

Continuing the discussion from [Brand header theme component](https://meta.discourse.org/t/brand-header-theme-component/77977):

How can i access HTML codes of that bar? I can access CSS codes but i can’t see HTML code with Google Chrome’s “show source” feature. I want to use that bar on Wordpress side, o i need HTML template.

---

<div class="post-metadata">

### Author: ![cmwebdev](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cmwebdev/32/122368_2.png) [@cmwebdev](https://meta.discourse.org/u/cmwebdev)
#### Post date: [8 Luglio 2018, 4:46pm UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859/2 "2018-07-08T16:46:00Z")

</div>

Just do a view source or use the Chrome inspector. The HTML code is generated in a script so it’s not something you will be able to copy paste from the component.

---

<div class="post-metadata">

### Author: ![bekircem](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bekircem/32/44582_2.png) [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [8 Luglio 2018, 6:40pm UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859/3 "2018-07-08T18:40:08Z")

</div>

I get the HTML.

```
<header class="b-header clearfix"><div class="wrap"><div class="contents clearfix"><div class="title"><a href="http://www.example.com"><h2 id="brand-text-logo" class="text-logo">Site</h2></a></div><nav class="links"><ul class="nav nav-pills"><li><a class="widget-link" href="https://www.example.com" title="Link1"><span class="d-label">Link1</span></a></li></ul></nav><div class="panel clearfix"><ul class="icons clearfix"><li><a class="widget-link" href="https://twitter.com" title=""><i class="fa fa-twitter d-icon d-icon-twitter" aria-hidden="true"></i> <span class="d-label"></span></a></li></ul></div></div></div></header>

```

But how i compile SCSS? I tried compile that on Codepen but i think @import “theme\_variables” line causes error.

```
@import "theme_variables";
.b-header {
  width: 100%;
  background-color: $tertiary;
  height: 48px;
  margin-bottom: 0; }

```

I want to create pure HTML CSS JS codes that component.

---

<div class="post-metadata">

### Author: ![cmwebdev](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cmwebdev/32/122368_2.png) [@cmwebdev](https://meta.discourse.org/u/cmwebdev)
#### Post date: [9 Luglio 2018, 3:00am UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859/4 "2018-07-09T03:00:04Z")

</div>

CodePen is fine. Delete that first line with the import.

Then, redclare all the variables at the top of the SCSS. You will get these values from `Admin -> Customize -> Color Schemes`.

If your secondary color is black, for example, you would declare it like this:

```
$secondary: #000000;

```

Put that at the top for every variable you see in that SCSS.

---

<div class="post-metadata">

### Author: ![bekircem](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bekircem/32/44582_2.png) [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [9 Luglio 2018, 8:02am UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859/5 "2018-07-09T08:02:54Z")

</div>

Hi,

I added that variables. Just, i can’t find $lightness variable in theme\_variable.scss

```
$primary: #222222 !default;
$secondary: #ffffff !default;
$tertiary: #0088cc !default;
$quaternary: #e45735 !default;
$header_background: #ffffff !default;
$header_primary: #333333 !default;
$highlight: #ffff4d !default;
$danger: #e45735 !default;
$success: #009900 !default;

```

It does not work corretly yet. Can you check it?

https://codepen.io/bekircem/embed/preview/ajoZoj?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=ajoZoj

---

<div class="post-metadata">

### Author: ![vinothkannans](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vinothkannans/32/86465_2.png) [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [9 Luglio 2018, 8:11am UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859/6 "2018-07-09T08:11:14Z")

</div>

Instead of using Discourse scss methods like `dark-light-diff`, `scale-color` and `lightness` you can just replace your desired colors directly in those places.

---

<div class="post-metadata">

### Author: ![bekircem](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bekircem/32/44582_2.png) [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [9 Luglio 2018, 8:16am UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859/7 "2018-07-09T08:16:35Z")

</div>

Thank you. @vinothkannans I added these variables. But i have problem HTML side i think.

https://codepen.io/bekircem/embed/preview/ajoZoj?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=ajoZoj

---

<div class="post-metadata">

### Author: ![bekircem](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bekircem/32/44582_2.png) [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [9 Luglio 2018, 9:25am UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859/8 "2018-07-09T09:25:43Z")

</div>

I edited HTML side. There are some problems about styling.

```
<header class="b-header clearfix">
  <div class="wrap">
  <div class="contents clearfix">
    <div class="title">
      <a href="#">
        <h2 id="brand-text-logo" class="text-logo">Title</h2>
      </a>
    </div>
    <!-- NAV -->
    <nav class="links">
      <ul class="nav nav-pills">
        <li>
          <a href="#" class="widget-link">
            <span class="d-label">
            Link1
            </span>
          </a>
        </li>
        <!-- LINK 2 -->
         <li>
          <a href="#" class="widget-link">
            <span class="d-label">
            Link2
            </span>
          </a>
        </li>
      </ul>
    </nav>
    <!-- RIGT SIDE -->
    <div class="panel clearfix">
      <ul class="icons clearfix">
        <li>
          <a href="#" class="widget-link" title="">
            <i class="fa fa-twitter d-icon d-icon-twitter" aria-hidden="true"></i><span class="d-label"></span>
          </a>
        </li>
        
        <li>
          <a href="#" class="widget-link" title="">
            <i class="fa fa-facebook d-icon d-icon-facebook" aria-hidden="true"></i> <span class="d-label"></span>
          </a>
        </li>
      </ul>
    </div>
    <!-- RIGHT SIDE -->
  </div>
  </div>
</header>

```

https://codepen.io/bekircem/embed/preview/ajoZoj?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=ajoZoj

---

<div class="post-metadata">

### Author: ![cmwebdev](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cmwebdev/32/122368_2.png) [@cmwebdev](https://meta.discourse.org/u/cmwebdev)
#### Post date: [9 Luglio 2018, 3:09pm UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859/9 "2018-07-09T15:09:40Z")

</div>

@bekircem here’s a fork of your CodePen that’s almost all the way there. It just needs some work on the font.

https://codepen.io/colin-marshall/embed/preview/qyWYoN?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=qyWYoN

I added the missing styles from `nav.scss` and also added a few CSS resets so the nav links would be properly positioned.

---

<div class="post-metadata">

### Author: ![bekircem](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bekircem/32/44582_2.png) [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [9 Luglio 2018, 3:54pm UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859/10 "2018-07-09T15:54:47Z")

</div>

Thank you so much! I will check it when I moved my laptop 🙂 for using hamburger menu should I add js codes?

---

<div class="post-metadata">

### Author: ![cmwebdev](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cmwebdev/32/122368_2.png) [@cmwebdev](https://meta.discourse.org/u/cmwebdev)
#### Post date: [9 Luglio 2018, 4:01pm UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859/11 "2018-07-09T16:01:39Z")

</div>

No problem!

Yes, you will want to add some JS for the hamburger menu.

---

<div class="post-metadata">

### Author: ![bekircem](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bekircem/32/44582_2.png) [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [9 Luglio 2018, 4:02pm UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859/12 "2018-07-09T16:02:20Z")

</div>

Can you provide JS side too?

---

<div class="post-metadata">

### Author: ![cmwebdev](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cmwebdev/32/122368_2.png) [@cmwebdev](https://meta.discourse.org/u/cmwebdev)
#### Post date: [9 Luglio 2018, 4:04pm UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859/13 "2018-07-09T16:04:59Z")

</div>

I don’t think I can just copy the JS Discourse uses for that since it looks like it’s tied into their plugin system.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [8 Agosto 2018, 4:05pm UTC](https://meta.discourse.org/t/how-to-use-brand-header-html-in-my-wordpress-site/91859/14 "2018-08-08T16:05:07Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.