Docs

[adriangregory]

Hello

I’m working on a new site, test site is here: http://www.portsmouthmusicacademy.co.uk/cms.

I want the social icons to display on the right of the page level with the logo, rather than in the topbar. I’ve followed instructions from another thread and got it to the stage it’s currently at if you look at the link above but now I’m stuck!….

1. By positioning the icons to the right, the logo has now moved left of the centre. How can make sure the logo stays centre.

2. Ideally I only want the social icons in this position on desktop view and on mobile view they would be in a row at the top of the mobile menu.

3. They are currently squashed together – what CSS can I use to adjust the layout of the icons?

4. I would also like a quick link to a booking form directly underneath the social icons on desktop view. Is this possible and if so how? The link would just be text saying ‘Book a lesson’

Thank you in advance for your help and I look forward to hearing from you.

[adriangregory]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for posting in.

1. You mean vertical alignment? Please add this CSS to Admin > Appearance > Customizer > Custom > CSS, this applies to 1#, #2, and #3.

  .c-social .x-social-global a {
    margin: 0px 3px;
}
@media ( min-width: 980px ) {
.c-social {
    position: absolute;
    right: 0;
}
.x-logobar .x-container {
    position: relative;
}
}

@media ( max-width: 979px ) {
.c-social {
    display: block;
    float: none;
}
}

The mobile menu has custom styling, should it go under the social icons? It looks good side by side with the icons.

3. Add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery('.c-social').append('<a hre="#" class="book_a_lesson">Book a lesson</a>');

Thanks!

[adriangregory]

Thank you for your reply. This theme and the support you guys provide is incredible!

I’ve made those changes and we’re nearly there, just a couple more tweaks:

1. I’d like the social icons and the ‘Book a lesson’ link to only appear in desktop view and ideally appear as items in the mobile menu dropdown. If putting them in the mobile menu is too awkward then just how to get them to only display in top bar when in desktop view.

2. What CSS can I use to style and position the social icons and the ‘Book a lesson’ link?

Thanks!

[Rupok]

Hi there,

Thanks for writing back.

#1. You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 979px) {
.c-social {
  display: none;
}
}

And you will need to add this to mobile menu to appear on mobile. We can provide you the code to hide for desktop. You can use a custom class for the menu items so that we can tailor the code for you. Update us after adding to menu.

#2. You can use the c-social class as I have used above. Let us know how do you want to position them if you need help.

Cheers!

[Author]

Posts