Mobile Navigation Menu Mess

[colhugs230]

Ok, so I'll start by saying that this is an issue of my own creation and I am hoping that one of the lovley comunity members more well veresed in CSS can help me out.

I moded a theme to change background colors and other colors that were not assessable via the theme's color controls as well as add social media icons to our menu. The result is a great looking computer website and that our mobile site is a raging dumpster fire!

The site is jbtvmusic.com, but for ease I have attached a screenshot. As you can see, all of the menu links stack on top of each other. In addition, simply scrolling to the left reveals the menu — as opposed to needing to tap the hamburger icon.

Again, this is on me, hoping a kind soul can swoop in and save the day!

[Meathead]

I'm having a similar problem with a website I just got up and running.  The site looks fantastic on a desktop but switch to a mobile and titles are separated from there associated narratives, words are split and the letters are stacked in columns, and elements oriented one way on a desktop, are re-oriented to fit a protrait mode in a way that is not working for me.  For reference, my site is https://www.sugarpinecabin.com/

Colhugs230, I took a look at your site first on my desktop, then on my iPad, and then on my phone.  It actually works very well on all the devices, so I don't know if your problem has been rectified or is specific to the device you are using. The only flaw I could find within your site was some floating of the page as I scrolled.  The header and text fell within the confines of my screen in portrait mode, but as I scrolled down, I could also scroll to the side and cause your text to disappear off the left side of the screen.

I am hoping Weebly has a service or tutorial video that will provide some assistance.  I'm afraid optimization for a mobile device might be outside of my skill level.  I will continue to follow this topic.  

[colhugs230]

Thanks for taking a look! I just realized the screen shot didn't attache so heres a link to what I see on my iPhone 6.

https://drive.google.com/file/d/1wHspByiaJNbxa8Hsfatd4xBTNK-WTDTG/view?usp=sharing

[Adam7]

It sounds like some of your customizations are also being applied to the mobile navigation. You probably need to add mobile-specific rules to correct that, @colhugs230. I would review the various changes you've made, since the original rules are probably what you need to use for the mobile navigation.

[colhugs230 · Accepted solution]

SOLUTION!

Just in case someone else somehow manages to mess up the exact same thing I did, here is what fixed it for me. Note it was two seperate issues, and two seperate lines of code needed to be fixed.

I hade to change the following:

 .navmobile-wrapper {

   position: absolute;

Previously position was set to fixed;

 #navmobile li a {

   position: fixed;

Previous position was set to absolute;

Hope this helps someone out there!

[Bernadette3]

Thanks for sharing, @colhugs230!

[jimon007]

Tried but did not work.   Thanks though!