Need help with my (non)-responsive custom header


#1

Hey,
We have custom header links here and they look great until you’re on a phone.
Then they look like this

I have this code in the Header CSS

    // header links
.nav-link-container {
    li { 
        display: inline-block;
        float: right;
        a {
            color: rgb(255, 255, 255);
            text-decoration: none;
            text-align: center;
            font-family: "Trebuchet MS", Helvetica, sans-serif; 
            line-height: 48px;
            min-width: 90px;
            font-size: 15px;
            padding: 0 1em;
        }
    }
}

and this in </head>

 {{#if showExtraInfo}}
      {{header-extra-info topic=topic}}
    {{else}}
    <ul class="nav-link-container" style="text-align: center;">
        <li><a class="nav-link " href="https://www.feverbee.com/resources" target="_blank">RESOURCES</a></li>
        <li><a class="nav-link " href="http://www.feverbee.com/events" target="_blank">EVENTS</a></li>
        <li><a class="nav-link " href="http://ondemand.feverbee.com/" target="_blank">TRAINING</a></li>
        <li><a class="nav-link " href="http://www.feverbee.com/consultancy" target="_blank">CONSULTANCY</a></li>
        <li><a class="nav-link " href="http://www.feverbee.com/about-us" target="_blank">ABOUT</a></li>
        <li><a class="nav-link " href="http://www.feverbee.com" target="_self">HOME</a></li>
    </ul>
    {{/if}}

Where am I going wrong? Thanks.


(Simon Cossar) #2

I think you need to add the css for mobile separately.


#3

Brilliant, that definitely worked. Thanks.

Now the styling is great, but I want to only display one of the links on mobile, rather than all 6.
Can anyone point me in the right direction to do that?


(Simon Cossar) #4

With the moblle view, the class .mobile-view is added to the html element. If you add a class to the <li> tags that you want to hide - for example <li class="hidden-for-moble"> you can then do something like this in your css:

.mobile-view .hidden-for-mobile { display: none; }