Top Bar - Hide Mobile

[dpasker]

https://www.danpasker.com

I need the top bar to be hidden on mobile - see screen shot.

I have already tried entering the following code:

@media (max-width: 979px) {
    .x-topbar {
    visibility: hidden;
    } 
    }

[donwattz1459]

try display: none; instead.

[paul.r]

@donwattz1459

Thanks for helping

@dpasker

Yep, you can try this code instead.

@media (max-width: 979px) {
    .x-topbar {
       display:none;
    } 
    }

[dpasker]

@paul.ravena

@media (max-width: 979px) {
.x-topbar {
display:none;
}
}

For some reason this eliminates the top bar but also eliminates the navigation bar area and ‘logo.’

Ah - because I was using this as top bar content:

<p class="p-info">Daniel Pasker</p>

<div class="x-social-global">

<a href="https://www.facebook.com/dpasker/" class="facebook" title="Facebook" target="_blank">
<i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a>

<a href="https://twitter.com/dpasker" class="twitter" title="Twitter" target="_blank">
<i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a>

<a href="www.linkedin.com/in/dpasker/" class="linkedin" title="LinkedIn" target="_blank">
<i class="x-icon-linkedin-square" data-x-icon="" aria-hidden="true"></i></a>

[jade]

Hi there,

So is everything sorted now?

I checked your site and it seems to be fixed.