Docs

[newsomatic]

Hello,

My site is currently listed at

I’m trying to add a green, pill-shaped login button (with the ‘log-in’ X icon next to the button text label). I added a custom id (custom-login-btn, in the screenshot below) so I could slightly style this element without messing around with my default button preferences. However, I’m having issues with the text formatting, vertical alignment, and hover behavior of this button.

Regarding vertical alignment, I needed to include a negative top margin for the button to be on the same line as the other menu items (in the CSS customizer screenshot below). However, this means my mobile menu (which weirdly formats the buttons correctly) gets completely messed up: the negative margin moves the menu button up. Is there a way to specify that this margin only be applied when the mobile menu is absent?

Furthermore, I wanted the text to be formatted in the same style as the accompanying nav bar menu links, not in current bolded, lower-case version. I’m also having trouble getting the sign-in icon to show up next to the button label (did I not use the correct format for the button shortcode?).

The hover behavior is my last issue—the button definitely looks right according to the classes I assigned it, but it doesn’t change color and shading on hover the way the buttons included in the Integrity Shortcodes page do.

I imagine this can all be solved using the right CSS class/id selectors in the Customizer, but I’m having trouble doing this efficiently and figuring out exactly which selectors I need.

I’m sorry for the lengthy post; thank you in advance for your time and your help!

[Joao]

Hi There,

Update your code to:

#custom-login-btn { 
    background-color: green;
    border: green;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 13px;
}

@media (min-width 980px) {
#custom-login-btn { 
   margin-top: -9px;
}
}
#custom-login-btn:hover { 
    background-color: limegreen;
    
}

Hope that helps,

Joao

[newsomatic]

Hi Joao,

Thank you for the help! Just wanted to let you know, however, for the middle styling block I had to add a colon after min-width (min-width: 980px) in order for the customizer to parse the CSS correctly. It was a small typo but worked immediately after I added that. Thank you again!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts