[Support request] Mobile Custom Button on Main Navigation header is too large

[Rostyslav]

Hello I am using main navigation as a header. To make a button on a header I used this code:

.main-navigation:not(.slideout-navigation) .main-nav li.custom-button a {
    color: white;
    background-color: #0b8844;
    box-shadow: rgb(0 0 0 / 20%) 0px 2px 4px 0px;
    border-radius: 25px;
    border: 2px solid transparent;
	  line-height: 36px;
	  margin-left: 50px;
 }

And the result is this: https://ibb.co/gvDdd5h

The problem is that in mobile I see this button full width: https://ibb.co/BzVcDtZ

How can I get this result?:https://ibb.co/vHbJJ0Y

Thanks!

[Leo]

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Rostyslav]

Sure

[Fernando]

Hi Rostyslav,

This is what I see viewing your site now: https://share.getcloudapp.com/p9uO5yen

It seems that you were able set a width for your custom li.

Alternatively, you may also do it as such: width: fit-content;

For instance:

@media (max-width: 1060px) {
    .main-navigation:not(.slideout-navigation) .main-nav li.contacto a {
        width: fit-content;
    }
}

Hope this helps!

[Author]

Posts