Liking the new theme


(JoeBuhlig) #1

Kudos to @HAWK. I’m liking the new header bar here.


(Alessio Fattorini) #2

Mee too. Very nice! Who has designed it?


(Sarah Hawk) #3

Thanks Joe. We had some new branding collateral done for the Advanced Engagement training (see the banner on our homepage) and it looks great so I’m playing around with colours a bit.


(Sarah Hawk) #4

I wrote the header CSS but the colour was extracted from the banner (see above) which is the work of @Joel_Carlo


(Gear Buzz) #5

Btw I pretty much exclusively access this site via my iPhone.


(Sarah Hawk) #6

You should still see the changes, you just have limited nav items in the header itself.


(Richard Millington) #7

you really keep us on the edge of our seats @julesstanden :slight_smile:


(Alessio Fattorini) #8

Would you mind to share it? Is it open source? :slight_smile:
I’d like to setup it for my community, multiple links to the main site are pretty cool.
Acknowledgements are due , obviously


(Sarah Hawk) #9

It’s a whole lot of bits that I hacked together over time using CSS and media queries. I’m happy to share. What specifically is it that you want to do? The header links?


(Alessio Fattorini) #10

Just the header links it would be enough


(Sarah Hawk) #11

No worries.

Here is the CSS and media queries (goes in /admin/customize/css_html/8/css)

// header links

.mobile-view .hidden-for-mobile { 
    display: none; 
}
.add-header-links {
    margin-left: 0 !important;
}

@media screen and (max-width: 940px) {
    .nav-link-container li:nth-child(1) {
        display: none;
    }
}
@media screen and (max-width: 830px) {
    .nav-link-container li:nth-child(2) {
        display: none;
    }
}
@media screen and (max-width: 743px) {
    .nav-link-container li:nth-child(3) {
        display: none;
    }
}
@media screen and (max-width: 650px) {
    .nav-link-container li:nth-child(4) {
        display: none;
    }
}
@media screen and (max-width: 525px) {
    .nav-link-container li:nth-child(5) {
        display: none;
    }
}

.nav-link-container {
    li { 
        display: inline-block;
        float: right;
        a {
            color: rgb(255, 255, 255);
            text-decoration: none;
            text-align: center;
            font-family: 'Open Sans'; 
            line-height: 48px;
            min-width: 90px;
            font-size: 15px;
            padding: 0 1em;
        }
    }
}

And here is the markup (goes in /admin/customize/css_html/8/head-tag)

<style>
.d-header .icons .icon {
     float: right;
    color: #EC7825;
}


.add-header-links {
    float: left;
    padding-left: 0;
}
</style>

<script type='text/x-handlebars' data-template-name='/connectors/header-after-home-logo/add-header-links'>
  {{#unless showExtraInfo}}
    <ul class="nav-link-container" style="text-align: center;">
        <li class="hidden-for-mobile"><a class="nav-link " href="" target="_blank">LINK</a></li>
        <li class="hidden-for-mobile"><a class="nav-link " href="">LINK</a></li>
        <li class="hidden-for-mobile"><a class="nav-link " href="">LINK</a></li>
        <li class="hidden-for-mobile"><a class="nav-link " href="">LINK</a></li>
        <li class="hidden-for-mobile"><a class="nav-link " href="">LINK</a></li>
        <li><a class="nav-link " href="http://www.feverbee.com" target="_self">HOME</a></li>
    </ul>
  {{/unless}}
</script>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans"
/>

(Alessio Fattorini) #12

Great!! Just added and customized. Thank you so much.