Archived topic

Mobile Custom Button on Main Navigation header is too large

3 replies · Started by Rostyslav on June 7, 2022

Viewing posts 1–4 of 4

June 7, 2022 at 10:20 am #2246365

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!

June 7, 2022 at 10:36 am #2246381

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 :)

June 8, 2022 at 12:32 am #2246839

Sure

June 8, 2022 at 1:12 am #2246874

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!

This archived topic is closed to new replies.

Start building better websites today.