Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Somme issues with custom flag CSS on mobile wiew

Featured Lock Resolved Issue
Hi team,
I have been searching for hours in vain for three small CSS settings (see screenshot)
my code

@media (max-width: 1024px) {
#sp-top-flag-mobile {
position: fixed;
top: 0px;
height: 50px;
background: #fff;
width: 100%;
z-index: 10000;
}}
@media (max-width: 1024px) {
#sp-header {
position: fixed;
top: 50px;
z-index: 9999 !important;
height: 140px !important;
color: #317280 !important;
box-shadow: 0 0px 0px rgba(0,0,0,0.05);
}}
@media (min-width: 1025px) {
#sp-header {
height: 110px !important;
color: #317280 !important;
box-shadow: 0 0px 0px rgba(0,0,0,0.05);
}}
@media (max-width: 1024px) {
#sp-logo {
position: fixed;
top: 50px;
z-index: 9999;
position: fixed;
height: 90px;
background: #fff;
width: 100%;
z-index: 9999;
}}
@media (max-width: 1024px) {
#sp-top-bouton {
position: fixed;
top: 160px;
z-index: 9999;
width: 100%;
padding-top: 15px;
background-color: #ab1917;
color: #ffffff;

}}
@media (max-width: 1024px) {
#sp-menu col-xs-6 {
width: 90%;
}
#offcanvas-toggler >i {
position: fixed;
top: 90px;
z-index: 9999;
color: #317280 !important;
font-size: 150% !important;
}}
@media (max-width: 767px) {
.nav-placeholder {
position: absolute;
}}
@media (min-width:768px) and (max-width:1024px) {
.nav-placeholder {
position: absolute;
}}
@media (max-width: 767px) {
#sp-page-title {
height: 0px !important;
}}
@media (min-width:768px) and (max-width:1024px) {
#sp-page-title {
height: 0px !important;
}}


Thanks in advance about your help !
Admin FO
ID :Test
PW : 2018Tests2018
Admin BO in PM if you want.
Best regards

Attachments (1)

  • couette.jpg
    couette.jpg 249.1 KB

11 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
In case of..... here is extra code used


@media (max-width: 780px) {
#sp-logo {
position: fixed;
top: 30px;
z-index: 9999;
height: 90px;
width: auto;
}

#sp-header {height: 115px !important; top: 25px;}

.menu-fixed {top: 0 !Important;}
.menu-fixed #sp-logo {top: 4px !Important;}

#sp-header.menu-fixed-out #offcanvas-toggler > i {
top: 60px;right: 45px;
}

#sp-header.menu-fixed #offcanvas-toggler > i {
top: 35px; right: 45px;}

#sp-main-body {margin-top: 90px;}

#offcanvas-toggler > i:hover,
#offcanvas-toggler > i:focus {color: #222 !important;}

}



Yes, I also added hover effect for [=] mobile menu, and corrected component view top margin, because header is static and hidden some content. Now is much better.

It was not so easy .. so many custom code added by you.


after.jpg

Attachments (1)

  • after.jpg
    after.jpg 16.3 KB

Archange Consulting

More than a month ago #Permalink
Please UP !

Archange Consulting

More than a month ago #Permalink
Please UP !

Archange Consulting

More than a month ago #Permalink
a screenshot to inform

Attachments (1)

  • screenshot-www.chouettehotel.archange-solutions.work-2018.11.29-07-01-33.jpg
    screenshot-www.chouettehotel.archange-solutions.work-2018.11.29-07-01-33.jpg 87 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
Ok, I think I know what is wrong.
If this is custom header from helix, you can set different columns size for tablet and mobile.
This should fix problem of hidden flags.
In most cases you do not need extra CSS to fix it.

Archange Consulting

More than a month ago #Permalink
Wonderfull Paul !
You're the geat !

Archange Consulting

More than a month ago #Permalink
you forgot the booking button in top2 position and set the flags and the book button in mobile version ...

Archange Consulting

More than a month ago #Permalink
I'll do it and I go back...

Archange Consulting

More than a month ago #Permalink
Hi,
I've modied the custom.css ans now I have an issue :
I want in desktop version that the flag dispaly when scrolling but Header and logo go to up....

Archange Consulting

More than a month ago #Permalink
Thanks Paul !


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 130
Toufiq

Toufiq

Total Accepted Answers: 103
Sifat

Sifat

Total Accepted Answers: 67
RV

RAFFAELE VIOLA

Total Accepted Answers: 2
DS

Dustin Swayne

Total Accepted Answers: 1

116

Templates

299775

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us