Phenomlab Technology Forum

Can you share me mobile bottom navigation css ?

Muhammed Here you go

@media(max-width: 500px) { .mobile-app-icon-bar{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  background: #fefefe;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 46px;
  z-index: 2;
  background: #666666!important;
} 
}

.buttonstyle.active{
 color: #002998 !important;
}
.buttonstyle i {
    font-size: 20px;
}

.buttonstyle{
width:20%;
display: flex;
flex-direction: column;
align-items: center;
background: #666666 !important;
border: none;
margin-top: 4px;
}

.spanstyle{
font-size: 10px;
    margin-top: 5px;
}

.mobile-app-icon-bar button {
  padding: 0.75rem !important;
  cursor: pointer;
}

.mobile-app-icon-bar button svg,
.mobile-app-icon-bar button i,
.mobile-app-icon-bar button img {

}


@media(min-width: 800px) { .mobile-app-icon-bar{ 
  display:none !important;
} 
}

And you'll need this in the custom footer. Note, that for this to work, you'll need the Direct Links Extension installed and activted

<div class="mobile-app-icon-bar" id="myDIV">
  <button onclick="location.href='https://your-forum-url'" class="buttonstyle"><i class="fa fa-home"></i>

  <button  onclick="location.href='https://your-forum-url/?sort=newest'" class="buttonstyle"><i class="fas fa-hourglass"></i>
  <button onclick="location.href='https://your-forum-url/composer'" class="buttonstyle"><i class="fas fa-edit"></i>
  <button  onclick="location.href='https://your-forum-url/tags'" class="buttonstyle"><i class="fas fa-tags"></i>
<button  onclick="location.href='https://your-forum-url/notifications'" class="buttonstyle"><i class="fas fa-bell"></i>
</div>

Ok. Made a small change to the layout. I was never really comfortable with the footer and icon bar for mobile view, so.... I changed it.

Here's the result

CSS

body.dark #console-nav-footer {
    background-color: #666666;
}
a.feedback-menu-left,
a.feedback-menu-right{
    color: #ffffff !important;
    font-weight: 600;
}
#floatcentre {
    display:none;
}
@media only screen and (max-width: 600px) {
#console-nav-footer {
    padding: 0 20px;
    text-align: center;
    line-height: 40px;
    height: 40px;
    background-color: #f5f5f5;
    position: fixed;
    width: 100%;
    bottom: 0;
}
body.dark #console-nav-footer {
    background-color: #666666;
}
#floatleft, #floatright {
    display: none;
}
#floatcentre {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 450px;
	display: contents;
}
body.dark #floatcentre i {
    margin-left: 25px;
    margin-right: 25px;
	font-size: 18px;
	color: #ffffff;
}
div#floatcentre i {
    margin-left: 25px;
    margin-right: 25px;
	font-size: 18px;
	color: #808080;
}
}

Footer code

<div id='console-nav-footer'>
<div id='footer-content'>
<div id='floatleft'>
        <i class='fal fa-comment'></i><a class='feedback-menu-left' target='_blank' href='https://phenomlab.com/feedback'>Feedback</a>
</div>
<div id='floatcentre'>
  <a class='feedback-menu-left' href='https://forum.phenomlab.com'><i class="fal fa-home"></i></a>
  <a class='feedback-menu-left' href='https://forum.phenomlab.com/?sort=newest'><i class="fal fa-hourglass"></i></a>
  <a class='feedback-menu-left' href='https://forum.phenomlab.com/composer'><i class="fal fa-edit"></i></a>
  <a class='feedback-menu-left' href='https://forum.phenomlab.com/tags'><i class="fal fa-tags"></i><a/>
  <a class='feedback-menu-left' href='https://forum.phenomlab.com/notifications'><i class="fal fa-bell"></i><a>
</div>
<div id='floatright'>
        <a class='feedback-menu-right' target='_blank' href='https://forum.phenomlab.com/p/1-guidelines'>Terms</a>
        <a class='feedback-menu-right' target='_blank' href='https://phenomlab.com/policies/'>Privacy</a>
</div>
</div>
</div>

See examples of how this works over on the site (https://forum.phenomlab.com) - in standard view, you'll see that nothing really has changed - until you enable mobile view, or view from a mobile device.

PC view

Mobile view

Enjoy - feel free to "steal"

SV7 A question: Is it possible to display the 'unread-messages count' for the bottom-bar notification-bell image - so that if a user has new notifications, it will show on the icon? (the way it appears on desktop)

Without an extension, not natively although it could be possible to replicate the bell and replace the notification icon in the bottom-bar notification. Hmm - you've got my curiosity now ! I'll have a look at this.

My Dev site contains many enhancements that I'll be pushing into production hopefully this weekend. The major update being full integration with WordPress courtesy of @clarkwinkelmann in terms of his extension. The site is going to offer much more than just forums - mentoring, education, training, consultancy... The list is endless. The core of all this is still (and always will be) flarum.

Good luck ️

Joined Phenomlab.com

Hope to see more interesting news there.

meetdilip can you provide screenshots ? I think you haven't activated the account yet. The forum uses WordPress for its authentication and unless you activate the account, your won't be able to use the forum properly.

Thanks

I will try again today and let you know. I tried to different thing for some time before giving up.

meetdilip Odd. I'd need to know the user ID you subscribed with to check at my end.

meetdilip yes. It's a bug with the WordPress extension. @clarkwinkelmann is aware of this

Happened again 2 minutes before. I was able to login.

meetdilip for the sake of reproduction, can you provide the steps you took to replicate this issue ?

Thanks

Nothing special.

1. Typed phenomlab.com on browser
2. Logged in
3. Opened articles links in the home page on separate tabs for reading
4. Tabs opened with the error
5. To confirm, I tried forum.phenomlab.com and tried to open in tabs. Tabs came open with the error
   Hope this is ok

meetdilip thanks. That's my experience also. Hopefully we can get that resolved soon.