Need help with my (non)-responsive custom header


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}}
    <ul class="nav-link-container" style="text-align: center;">
        <li><a class="nav-link " href="" target="_blank">RESOURCES</a></li>
        <li><a class="nav-link " href="" target="_blank">EVENTS</a></li>
        <li><a class="nav-link " href="" target="_blank">TRAINING</a></li>
        <li><a class="nav-link " href="" target="_blank">CONSULTANCY</a></li>
        <li><a class="nav-link " href="" target="_blank">ABOUT</a></li>
        <li><a class="nav-link " href="" target="_self">HOME</a></li>

Where am I going wrong? Thanks.

(Simon Cossar) #2

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


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; }