Header Button problem

Ninja

cytropics
Hi
Add this code in custom.css file


@media screen and (max-width: 1200px){
.right-menu .nav li > a.item-primary { width: 150px;    text-indent: initial;}
.right-menu .nav li > a.item-primary:after {
display:none!important;
}}

If there is no custom.css file in css folder, kindly create it and add the code.

Regards

cytropics

Ninja
Sorry, nothing changed.

Ninja

cytropics
Hi
Kindly clear browser cache and check again.
The code is working fine http://prntscr.com/nt40gm

cytropics

Ninja
I did, it works fine. This is how it now looks in mobile smaller screens. How to fix button to make smaller to fit

teitbite

cytropics Hi. Please add this to css:

@media only screen and (max-width:479px) {
.right-menu .nav li > a.item-primary {
    width: auto;
    font-size: 10px;
    padding: 20px 10px !important;
}
}

cytropics

teitbite
I tried this but it did not work at all.

teitbite

cytropics Hi. Please try clear cache. I've just checked Your custom.css file and style given is not there anywhere.

Ninja

cytropics
Hi
Your browser has cache,
I checked your custom.css file and there is no code now.
You must add the code first, clear your Joomla and browser cache.
If your server also has cache kindly clear that too.
Here you can see if you will add the code it will work fine http://prntscr.com/ntglxf

cytropics

teitbite
Ninja

Thanks, how to get the button above the line?

Ninja

cytropics
Hi
I just checked you applied some more changes and button already up : http://prntscr.com/nv7ecj
Kindly clear cache and check.

cytropics

Ninja
This is how it looks from my end:

Ninja

cytropics
This seems the mobile width in your screenshot is below 435px in this view there is not enough space to fix both items in one row.
You can add this code in custom.css file increase the header height

@media(max-width:435px){
.uber-header.header-4 {
    height: 130px!important;
}}

It will look like this http://prntscr.com/nv7hap

cytropics

Ninja
Thank you