Topbar mobile version customization and getting rid of white box background (also mobile)

Support
#1

Hi there,

I looked at many different posts with similar problems and tried many times to get it to work for me and it just doesnt.

I’d like to make my mobile top bar pretty much the same as desktop with 2 changes.

I’d like the contact links to each have their own line. This text: “A small family business and not a licensed contractor.” would then start on the next line.

I’d like the white box to be gone. I think everyone wants the white box gone tbh. :stuck_out_tongue:

Here’s my website: http://xeriscapetucson.com

Much appreciated. Love the theme. Thanks.

#2

Hi There,

Please remove the dividers | from your topbar content, and add the following code to theme options CSS

  .x-topbar .p-info a {
 display: block;
  border: 0px
      }
.x-topbar .p-info {
    background: none;
}

Hope it helps!

#3

Thanks Joao!

So that works, buuuut…I only want it to be like that for the mobile version. I’d like them to be in one row on the desktop version. Could you help me with that?

Also, the topbar has too much height. I’ve tried changing it but it moves the rest of my site up with it and my page content ends up being too high.

#4

Hey Joao, I changed it up a bit and I like it how it is now. One thing I would like to change is the height of the topbar in mobile version only.

Thank you

#5

Hi there,

Please add this CSS with your preferred height :slight_smile:

@media ( max-width: 767px ) {
.x-topbar {
height: 90px;
} 
}

Hope this helps.

#6

Perfect. Thank you!

#7

You’re welcome.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.