Editing Spotify follow button in Menu bar

[jamie2364]

Hi,

I’ve added a spotify follow button in the header area just to the right of the navbar. However, the placement of it does not look very good. I want to put a margin above it and to the left of it so that it is centred vertically on the nav bar and also there’s an equal gap between the youtube follow icon and the spotify icon as there is between the rest of the icons. Do you have some margin adjustments to the followonig code to acheive this?

Thanks so much
Jamie

[nico]

Hi @jamie2364,

Thanks for writing in.

To adjust both the icons and the button, you can use this code below to be added in your custom CSS:

.menu-item-type-yawp_wim {
margin-top:7px;
}

To adjust your button:

. menu-item-object-yawp_wim menu-item-199{
    margin-top: 10px;
    margin-left: 10px;
}

Hope it helps.

Let us know how it goes.

Thanks.

[jamie2364]

Hey,

The first one works perfect to adjust the icons but not the button - so thank you for that, but the second one does nothing for the button either - in fact the icons move back to the top where they were if I use that one.

Please advise
Thanks
J

[paul.r]

Hi,

There’s a typo,there should be no space after the dot.

.menu-item-object-yawp_wim menu-item-199{
    margin-top: 10px;
    margin-left: 10px;
}

Thanks

[jamie2364]

Hi

I created a new page with a new menu, and this rule was not applied to the spotify button on that page. have a look:

jamieharrisonmusic.com/bold-as-love-lesson

Is there a way I can get this edit to apply to that menu/page aswel?

Thanks so much
Jamie

[ruenel]

Hey Jaime,

Are your using a different menu? If that is the case, please have the code updated and use this instead:

.menu-item-object-yawp_wim.menu-item-199,
.x-nav > .menu-item > iframe{
    margin-top: 10px;
    margin-left: 10px;
}

Hope this helps. Please let us know how it goes.