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

Your Time: Our Time:

Menu bar doesn't show propertly when the screen is smaller

Featured Lock Resolved Issue
I have my navigation bar that is ok when it is on regular desktop screen but when I make the screen smaller the navigation go down
what should I do that it will responsive and not move from his place

Attachments (2)

  • Screen Shot 2018-03-16 at 13.34.54.png
    Screen Shot 2018-03-16 at 13.34.54.png 154.8 KB
  • Screen Shot 2018-03-16 at 13.34.25.png
    Screen Shot 2018-03-16 at 13.34.25.png 916.7 KB

12 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Please remove all the previous css i provided and use this css instead.

@media only screen
and (max-width: 800px)
and (min-width: 350px) {
#sp-header #offcanvas-toggler {
position: absolute;
right: 0;
top: 0;
}
}
@media only screen
and (max-width: 330px) {
#sp-header #offcanvas-toggler {
position: absolute;
top: -25px;
right: -25px;
}
}
@media only screen
and (max-width: 1300px)
and (min-width: 1000px) {
#sp-menu {
width: 70%;
}
#offcanvas-toggler {
position: absolute;
top: 0;
right: 0;
}
#sp-logo {
width: 25%;
}
}

Please let me know if it works.

-Thanks

Sifat - Staff

More than a month ago #Permalink
Hi,
Please share your site url here.

-Thanks

Sifat - Staff

More than a month ago #Permalink
Hi,
Just checking. Could you solve your issue?

joelle gold

More than a month ago #Permalink
sorry No I couldn't be solved the issue even update the
when I go to a mobile or iPad mode or even shrink the desktop little bit the menu go down

in the custom code, I added

#sp-header .logo {
position: inherit;
display:inline-table;
}

but still, have an issue
need help there
thanks

joelle gold

More than a month ago #Permalink
sorry No I couldn't be solved the issue even update the

when I go to a mobile or iPad mode or even shrink the desktop little bit the menu go down

in the custom code, I added

#sp-header .logo {
position: inherit;
display:inline-table;
}

but still, have an issue
need help there
thanks


any news?

Sifat - Staff

More than a month ago #Permalink
Hi,
Please use this css into your custom css field

@media only screen
and (max-width: 750px)
and (min-width: 350px) {
#sp-header #offcanvas-toggler {
position: absolute;
right: 0;
top: 0;
}
}
@media only screen
and (max-width: 330px) {
#sp-header #offcanvas-toggler {
position: absolute;
top: -25px;
right: -25px;
}
}



-Thanks

Sifat - Staff

More than a month ago #Permalink
Hi,
Just checking. Could you solve your issue?

joelle gold

More than a month ago #Permalink
Hi,
Just checking. Could you solve your issue?


Thank you it worked on the cell phone but when I shrink the screen of my desktop I still have the issue the
menu bar going down again
look at the attachment thanks
Please can you check and let me know

thanks

Attachments (1)

  • Screen Shot 2018-04-04 at 14.38.19.png
    Screen Shot 2018-04-04 at 14.38.19.png 52.9 KB

Sifat - Staff

More than a month ago #Permalink
Hi,
Please use this css to solve this issue

@media only screen
and (max-width: 1300px)
and (min-width: 1200px) {
#offcanvas-toggler {
position: absolute;
top: 0;
right: 0;
}
}


-Thanks

joelle gold

More than a month ago #Permalink
Hi,
Please use this css to solve this issue

@media only screen
and (max-width: 1300px)
and (min-width: 1200px) {
#offcanvas-toggler {
position: absolute;
top: 0;
right: 0;
}
}


-Thanks


It still didn't solve the issue, I still have the same problem
Please advise

thanks

joelle gold

More than a month ago #Permalink
Yes it did work with some corrections

@media only screen
and (max-width: 800px)
and (min-width: 350px) {
#sp-header #offcanvas-toggler {
position: absolute;
right: -25px;
top: 0;
}
}
@media only screen
and (max-width: 330px) {
#sp-header #offcanvas-toggler {
position: absolute;
top: 0px;
right: -5px;
}
}
@media only screen
and (max-width: 1300px)
and (min-width: 1000px) {
#sp-menu {
width: 70%;
}
#offcanvas-toggler {
position: absolute;
top: 0;
right: 0;
}
#sp-logo {
width: 25%;
}
}


Thank you


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: 110
Sifat

Sifat

Total Accepted Answers: 61
Toufiq

Toufiq

Total Accepted Answers: 47
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 14
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 12

118

Templates

303051

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