Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 10, 2025 at 1:02 pm #1481134
    jscarlett

    Hi

    I needed to add a small Sign In button on a website, onto the top bar underneath the strapline on a mobile and to the right on desktop view.

    I managed to add the button, but it is too large.

    There are three buttons on the homepage and more buttons inside the site and I do not want CSS changes to affect the other buttons.

    How can I change the size of the Sign In button without changing the size of the other buttons?

    Thanks

    Jane

    • This topic was modified 1 week, 1 day ago by jscarlett.
    April 10, 2025 at 7:36 pm #1481145
    Rikard

    Hey jscarlett,

    Please try the following in Quick CSS under Enfold->General Styling:

    #top #header_meta .phone-info {
  line-height: inherit;
}

    Best regards,
    Rikard

    April 14, 2025 at 1:47 pm #1481305
    jscarlett

    Hi Rikard

    Thank you for your reply but it hasn’t made any difference to the size of the button.

    I’ll attach a page containing jpegs of what I am trying to achieve.

    Thanks

    Jane

    April 14, 2025 at 3:22 pm #1481310
    Rikard

    Hi,

    Please try this as well:

    
.phone-info .avia-button {
  padding: 0 10px;
}

    Best regards,
    Rikard

    April 14, 2025 at 6:36 pm #1481324
    jscarlett

    Hi Rikard,

    Thank you – it’s betting smaller!

    Is there a way of reducing the button text without reducing the font size of the strapline to the left please?

    Thanks

    Jane

    April 15, 2025 at 5:07 am #1481350
    Ismael

    Hi,

    Yes, that should be possible. Please include this css code:

    #top .phone-info .avia-button .avia_iconbox_title {
    font-size: 12px;
}

    Best regards,
    Ismael

    April 15, 2025 at 10:57 pm #1481403
    jscarlett

    Thank you!

    Almost there. I can’t work out how to lower the strapline ‘The active place to play’ so that it is more centred vertically on the top bar.

    Please can you help?

    Thanks

    April 16, 2025 at 6:07 am #1481409
    Ismael

    Hi,

    To adjust the vertical alignment of the submenu in the top bar, please add this css code:

    #header_meta .sub_menu {
    top: 15px;
}

    Best regards,
    Ismael

    April 16, 2025 at 11:20 am #1481430
    jscarlett

    Thank you Ismael, that is fantastic and has made the spacing work now on desktop.

    Please can you tell me how to add space above the strapline/top menu on a mobile view?

    Thanks

    Jane

    April 17, 2025 at 12:58 pm #1481507
    jscarlett

    I worked out how to do it myself by adding this to Quick CSS:

    @media only screen and (max-width: 767px) {
    .responsive #top .menu-item-27057 {
    padding-top: 15px!important;
    }
    }

    But the top bar is still too deep on a mobile so I still have the original problem where I am trying to achieve the design in the link above. In the mockup the orange banner is only twice as deep as it is on the live website (not more than three times as deep like it is now)

    So I still need to remove the vertical space on the orange banner on mobile, so that it is less deep than the white banner containing the logo

    So thank you for all your help in creating the small button but I need the spacing around it reduced as well (on a mobile especially) so that I achieve the design on the link.

    Please do you have any other solutions?

    Thanks

    Jane

    April 18, 2025 at 6:52 am #1481565
    Ismael

    Hi,

    Thank you for the update.

    Try to add this css code to further decrease the font size of the elements in the top bar and adjust its height.

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

  /* Add your Mobile Styles here */
  #top #header_meta a,
  #top #header_meta li,
  #top #header_meta .phone-info {
    font-size: 13px;
  }

  #top #header_meta .phone-info {
    padding: 0;
    margin: 0;
  }

  #top #header_meta .sub_menu {
    line-height: 16px;
  }
}

    View post on imgur.com

    Best regards,
    Ismael

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.