ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• January 25, 2016 at 10:26 am #243244
  SchlenzigxJones

  Member

  Post count: 39

  Hi,

  I just added the topbar on my site. I changed the color to yellow with black text. But on mobile it seems that the topbar is sitting underneath the mobile menu with black background and black text.

  Cant seem to find a place to change it?

  /M

  January 25, 2016 at 11:09 am #243267
  David Martin – Support

  Moderator

  Post count: 20834

  What is your URL?

  Thanks.

  January 25, 2016 at 11:28 am #243279
  SchlenzigxJones

  Member

  Post count: 39

  This reply has been marked as private.
  January 26, 2016 at 11:44 am #243704
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  You can certainly display it for small screens, but not above the header unfortunately:

  @media only screen and (max-width: 1024px) {
  .mhs-tablet-land .header-wrap, .mhs-tablet-land #top-bar {
      display: block;
  }
  }

  January 26, 2016 at 1:55 pm #243756
  SchlenzigxJones

  Member

  Post count: 39

  Hi David,

  The code makes it look pretty messy, with two menues etc.

  Initially when i turned on the topbar, it looked good on the desktop (yellow with black text) but on the iPhone it just gave me a black bar with no text.

  The code makes it yellow but messy. see attachement

  Attachments:

  You must be logged in to view attached files.
  January 27, 2016 at 6:45 pm #244271
  SchlenzigxJones

  Member

  Post count: 39

  Do you have any suggestions?

  I took the code of the site since it is live.

  /M

  January 28, 2016 at 11:23 am #244406
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Change it to:

  @media only screen and (max-width: 1024px) {
  .mhs-tablet-land .header-wrap, .mhs-tablet-land #top-bar {
      display: block;
  }
  }

  And in your css you have

  #top-bar .container .tb-left {
    position: absolute !important;
    z-index: 111 !important;
  }

  put that inside a media query:

  @media only screen and (min-width: 1025px) {
  #top-bar .container .tb-left {
    position: absolute !important;
    z-index: 111 !important;
  }
  }

  – Kyle

  January 28, 2016 at 2:02 pm #244512
  SchlenzigxJones

  Member

  Post count: 39

  Still dosen’t do the trick.

  I have kept the code and just /**/ it, so you can see it for yourself. Don’t want it on the site as it is already live.

  Any ideas?

  January 28, 2016 at 3:29 pm #244550
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  What result did you get with the css?

  – Kyle

  January 29, 2016 at 10:49 am #244749
  SchlenzigxJones

  Member

  Post count: 39

  Hi Kyle,

  This is how it looks on my browser in small size. Basically the yellow line is double size and the menu is spread out across the site + the menu is repeated.

  Attachments:

  You must be logged in to view attached files.
  January 29, 2016 at 10:53 am #244752
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Sorry, change:

  
  @media only screen and (max-width: 1024px) {
  .mhs-tablet-land .header-wrap, .mhs-tablet-land #top-bar {
      display: block;
  }
  }
  

  to:

  @media only screen and (max-width: 1024px) {
  .mhs-tablet-land #top-bar {
      display: block;
  }
  }

  – Kyle

  January 29, 2016 at 11:28 am #244774
  SchlenzigxJones

  Member

  Post count: 39

  Perfect.

  Is there a way to either remove the social icons or make text and icon stay on one line?

  /M

  Attachments:

  You must be logged in to view attached files.
  January 29, 2016 at 11:35 am #244781
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Add this:

  #top-bar ul.social-icons {
    display: none;
  }

  Inside

  @media only screen and (max-width: 1024px) {
  
  }

  – Kyle

  January 29, 2016 at 1:59 pm #244818
  SchlenzigxJones

  Member

  Post count: 39

  Perfect. Thanks

  January 29, 2016 at 2:00 pm #244821
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  No problem

• Back to forum

  Posted in: Atelier