Header Linklist Show in Mobile Only

Hello there,

I have a special header enabled for my forum, please see this photo:


As you can see, I don't have the usual linklist bar going underneath this special header section, because it is not needed to display Mark all forums read, View unanswered posts, View your posts, etc. when I have the info in the Special Header section.

Here is the bar that is hidden currently:



However, my special header section up there is not shown on Mobile devices due to compatibility, because I cannot get my table data to float correctly and be inline on a mobile device. Therefore, I decided to hide that on mobile. However, this disables not only the special header section, but also the linklist bar.

I have tried a couple of methods to bring back the linklist bar for mobile devices only, but it is not doing it correctly. Can anyone tell me please what I'm doing incorrectly or if I've missed anything?

@Dr Jay I have a question :

Would you rather make the homepage profile responsive ( rearrange contents for smaller screens ) or do as you're suggesting ; only show the original linklist. I figured I'd ask this first, because it's completely possible to rearrange the contents of the homepage profile for mobile by using media queries.

I would love to try it out. I'm experimenting daily with mobile interface.

I think the best solution would be to remove the floats on the avatar, stats, and link containers ; displaying each section on their own line. This way there will be a lot more space for each section and they wont seem as cramped on mobile.

I think you're using the homepage profile I made for FM way back, so I used theirs as an example for the snippet below. Go ahead and add it to your stylesheet.

Code:

@media (min-width:0px) and (max-width:768px) {

  #userProfile div[class$="Col"] {
    float:none;
    width:100%;
    margin-bottom:12px;
  }

  #userProfile div[class$="Col"] .title {
    width:100%;
  }

}

On any device below 768 pixels wide the homepage profile should look similar to this :

Okay... I have used that version you posted long ago, but I modified it quite a bit to make it more unique, especially incorporating FA, FAE elements, etc.

I once attempted to make it hide-able; however, it did not work for various reasons... But we decided as admins not to have it be hidden due to its minimal interface and extreme usefulness for a variety of situations, especially for non-staff (especially incorporating the avatar clicking ability to edit it). Of course, nothing super brilliant... Just accessible.

I will attempt this as soon as possible. I will be out of the office today, so I will check later today and see how it appears.

Thanks for your time!

P.S. - I'm helping several other administrators with the different FAE techniques... They love it! I am helping several others privately to ensure they too can accomplish their dreams. Thanks again!

(If you are still adding affiliates, especially direct ones, I've had a partner icon up for FM Design for a few months now. I can provide a mini-icon, if you don't mind)

Ah, well if you changed any selectors, the snippet of CSS I provided might not work. If that's the case, just let me know the modified code if you need any help adapting it.


Yes, the affiliates page is still active, let me know your button when you get the chance, so that I may add your forum.

Okay... This morning... tested... and it works well! => Solved and thanks.

Button for GeekPolice Affiliate:

Good to hear ! Thanks, I added your button to our affiliate page.

You're welcome.