code to hide nav bar for mobile devices?

NikMak

I have a floating Nav bar I like to use which works really well (ok, sometimes!) especially on longer posts like this one when viewed on PC/Laptop

https://the-great-pendragon.obsidianportal.com/posts/ill-met-by-moonlight

but its awful on mobile devices

Is there some code I can add so that its not visible on phones/tablets? or can I change the 'z' axis setting so it sits behind the central text on mobiles? (FYI its already at "...z index:-100;..." in the CCS code for the Nav box)

thanks in advance for any and all help

Unknown

You could add the class hide-for-small to it (this is the class that OP uses on the normal left nav menu to hide it on mobile devices. My guess is that should work and would be the easiest approach.

Alternately you can setup some code for it. The CSS would essentially target whatever the class is you have assigned to your special nav menu, I will post a general example and you could always fiddle with some of the values:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.myNav {
display: none;
}
}

--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/

GamingMegaverse

Love to know if this worked, and if you are happy with the result

Unknown

In theory I can assure that the second method I provided will work, I use it on my own site for a number of things. The details I provided will target most smartphones at the very least. You might need to do some different values to cover tablets as well. A Google search on CSS media queries should get you some helpful info on that. I haven't used the first method, but I would assume that it should work since that is what OP uses on the left nav bar normally.

NikMak

thanks for the help

the nested on the web page code reduces the nav bar to a single bordered line on mobile devices as you can see here - https://the-great-pendragon.obsidianportal.com/adventure-log/bearing-a-resemblance (dont forget it only works for smart phones!) - this is an enormous improvement so thanks for that. Any ideas on how to make it vanish completely?

the CCS you provided didnt work very well for me: it only worked on the 'Navmenue' itself, and not on the buttons nested within it (they are roll over buttons located in the Navmenue space on each page)


I will wait a few days to see if any one suggests a way to make the Nav menu 100% invisible for mobiles, and if not begin the process of shrinking it to a single line and be grateful for the 99% victory :)

Unknown

I looked at your code and the issue is how you setup the hide-for-small (you made a new div with this class). Rather than adding that extra (and unneeded div) you will want to just add the class to your NavMenu div. So, the code for that should look like this in your HTML:





Home

Inquisito

Groups

Families





I did some sneaky browser magic to test this on your site and it worked like a charm.

NikMak

thats great, thanks. at the same time i figured out it was an ordering issue as well

if I put the the nested divs in this order




that also works :)

is there any reason to use one method over the other? I know that (several years ago now) I have had issues with different code order and even text being necssary for different devices

Unknown

The better way to do it would be the method I provided above, and the reason is actually a simple one - less text equates to a smaller file size for the data which means a faster load time in the long run. As for how much impact it would really make for you here, not a lot, so do what is comfortable for you.

NikMak

I will follow your advice, and many thanks, its a great result

Unknown

Not a problem in the least, glad you have it working as desired. As you continue along with your page keep that other tweak I posted in mind as well, I have found it very hand for some areas of my page and the layout.

--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/

Sorwen

Thanks for the question and the answer. This really helped me so I can format parts of my campaign better for mobile as well. :)

Unknown

If you would like any additional tips in regards to mobile, I have done a lot of tweaking specifically for those types of devices and have the majority of my site working fully responsively now. I'd be more than happy to share/help with that in any way I can.