How to use brand header html in my WordPress site


Continuing the discussion from Brand header theme component:

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.

Brand header theme component
(Colin Marshall) #2

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.


I get the HTML.

<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">Site</h2></a></div><nav class="links"><ul class="nav nav-pills"><li><a class="widget-link" href="" 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="" 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.

(Colin Marshall) #4

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.



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?

(Vinoth Kannan) #6

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.


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


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>
    <!-- NAV -->
    <nav class="links">
      <ul class="nav nav-pills">
          <a href="#" class="widget-link">
            <span class="d-label">
        <!-- LINK 2 -->
          <a href="#" class="widget-link">
            <span class="d-label">
    <!-- RIGT SIDE -->
    <div class="panel clearfix">
      <ul class="icons clearfix">
          <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 href="#" class="widget-link" title="">
            <i class="fa fa-facebook d-icon d-icon-facebook" aria-hidden="true"></i> <span class="d-label"></span>
    <!-- RIGHT SIDE -->

(Colin Marshall) #9

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

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


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

(Colin Marshall) #11

No problem!

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


Can you provide JS side too?

(Colin Marshall) #13

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.

(system) #14

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