G+ and facebook buttons in header


(DjCyry) #1

Hello ,

How can i add the g+ /facebook like buttons here :

I have try to add the code from Personalise option but doesnt works . thanks


(Jeff Atwood) #2

There is an example of header changes at http://talk.commonmark.org if you view source.


(DjCyry) #3

Only i want to add that buttons .


(Jeff Wishnie) #4

I would like to do something very similar to CommonMark and add some text links to the header to the right of the Site Logo.

I’m having trouble seeing the code to accomplish this by viewing source.

Can you point me more directly? In particular, I think I need to see relevant sections of CSS, and maybe there is some JS involved?


(Joe) #5

@jwishnie

Try this:

put this in the Header section:

<div class="wrap">
    <ul class="header-links">
          <li><a href="#">Link1</a></li>
          <li><a href="#">Link2</a></li>
          <li><a href="#">Link3</a></li>
    </ul>
</div>

Along with this: under CSS:

.header-links {   
    position: absolute;
    z-index: 1001;              // stay on top of header
    height: 63px;               // match header height
    padding-left: 70px;         // create space for logo
    display: flex;
    align-items: center;
    
    li {
        display: inline-block;
        margin: 10px;
    }
}

And the result should be something like this:

This still needs to be tweaked for mobiles. Let me know if you need more help.


(Jeff Wishnie) #6

Thank you, that’s what I needed to see! I may request more help when I get to tweaking for mobile!