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

Log In Free Support

Popular Articles

Missing style.css

Updating errors

Installing GP Premium

Installing GeneratePress

This topic has 3 replies, 3 voices, and was last updated 4 years ago by Fernando.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
June 7, 2022 at 10:20 am #2246365
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!
June 7, 2022 at 10:36 am #2246381

Leo
Staff
Customer Support

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

Rostyslav

Sure

June 8, 2022 at 1:12 am #2246874
Fernando
Customer Support
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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.