This topic is locked

how to move notification bell before hamburger menu in mobile view?

3/24/2022 5:32:29 PM
PHPRunner General questions
P
ppradhan@live.com author

Dear Sir,
How can I move the Notification bell icon before the menu icon in the mobile view? Preview below:

img alt

I want to remove the entire box that contains notification bell just below the menu icon taking space in the mobile view. Also please help me how I can make that navbar sticky in mobile view.
Any help is highly appreciated.

Thank you.

admin 3/28/2022

This is something that we will fix in one the following PHPRunner updates.

P
ppradhan@live.com author 3/30/2022

ok thank you. Please advise how to achieve this after update available.

P
ppradhan@live.com author 4/9/2022

is there any hack or trick to quickly achieve - (Fixed menubar, Notification Bar before Hamburger Menu) while viewing in mobile or small screen?

mbintex 4/10/2022

perhaps you try placing a duplicate of the bell icon and showing copy 1 placed where it is only on desktop and copy 2 placed where you want it only on mobile

P
ppradhan@live.com author 4/10/2022

@mbintex
no brother that did not work either. Creating a duplicate of Notification item will itself create a separte div in another line. Looks like we need to wait till admin makes few tweeks in the upcoming update!

P
ppradhan@live.com author 4/20/2022

I guess I need to close this question, as I hear from no one to resolve this issue and admin commented that upcoming update will solve this issue. Please advice.

admin 4/21/2022

Just wanted to say that in the "left bar menu" layout it already works as expected. We are working on making it show properly in "top menu" layout as well.

P
ppradhan@live.com author 5/5/2022

Dear Admin, I managed to hide the notification icon while at mobile but it hides permanently. May be there is something I missed to trick to allow the notification bell appear in the dropdown list.

I added this code in the JavaScript OnLoad event of Menu Page:

if (window.matchMedia("(max-width: 700px)").matches) {
pageObj.toggleItem("notifications", false );
} else {
pageObj.toggleItem("notifications", true );
}

Preview:

img alt

admin 5/5/2022

It can be done but instead of Javascript we recommend using Custom CSS. Using CSS media queries you can apply your CSS only when screen resolution is larger or smaller the specified screen width:
CSS media queries

P
ppradhan@live.com author 6/18/2022

haven't this feature included in new update?

fixed topbar with notification bell icon in same line as menu while at mobile?

P
ppradhan@live.com author 6/19/2022

I realized that phprunner.com new website is exactly as I was willing to have (the navbar for mobile is sticky and cool). Can we integrate this theme in phprunner? Admin please advice.

P
ppradhan@live.com author 7/1/2022

I'm trying using css and still unable to achieve mobile dedicated navbar to have sticky navbar and placing bell (notification icon) into the list of menu itself.
If anyone have already done in their projects, please suggest how I can acheive this?
@Admin, I'm still awaing this feature to come in your said upcoming udpdates?

Thanks with regards