Author Topic: DIY website not displaying navigation bar on mobile  (Read 2310 times)

frugalnacho

  • Walrus Stache
  • *******
  • Posts: 5060
  • Age: 41
  • Location: Metro Detroit
DIY website not displaying navigation bar on mobile
« on: February 19, 2021, 10:57:03 PM »
I don't know how to code.  The extent of me building a website is using a template someone else made, and modifying it for my own use.  I am attempting to create one right now, but it's not displaying the top navigation bar when loaded on a mobile phone.

This is the templated I used:

https://templated.co/linear

When I load that link on my mobile it collapses the top nav bar into a hamburger menu that displays the links when clicked on.  When I upload the template online however it doesn't display the links or a hamburger menu.  I originally thought I had inadvertently messed up the code when I customized it, but the straight template is giving me the problem. Unfortunately I didn't realize it didn't load properly on mobile until I had customized it and all sub pages as well, as I was just checking how it displayed on my laptop until it was finished and I put it online.  I am not absolutely married to this template, this was just a test run to see what I could put together for free.  I don't want to post my customized code because it contains a lot of personal information.  Currently hosting on tiiny.host because it came up on a google search for free, and is exactly what I was looking for, an online host to park the folder and see how it would display via different browsers/computers/mobile.  I don't have a full enough understanding of what all the elements mean to know what's causing the error.

This is the code (note: I think the original template contains an error and used apostrophes instead of quotations in one line.  I updated them to quotations and highlighted them red.  The rest is unchanged from the template):

<html>
   <head>
      <title>Linear by TEMPLATED</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta name="description" content="" />
      <meta name="keywords" content="" />
      <link href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,700,500,900" rel="stylesheet" type="text/css">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script src="js/skel.min.js"></script>
      <script src="js/skel-panels.min.js"></script>
      <script src="js/init.js"></script>
      <noscript>
         <link rel="stylesheet" href="css/skel-noscript.css" />
         <link rel="stylesheet" href="css/style.css" />
         <link rel="stylesheet" href="css/style-desktop.css" />
      </noscript>
   </head>
   <body class="homepage">

   <!-- Header -->
      <div id="header">
         <div id="nav-wrapper">
            <!-- Nav -->
            <nav id="nav">
               <ul>
                  <li class="active"><a href="index.html">Homepage</a></li>
                  <li><a href="left-sidebar.html">Left Sidebar</a></li>
                  <li><a href="right-sidebar.html">Right Sidebar</a></li>
                  <li><a href="no-sidebar.html">No Sidebar</a></li>
               </ul>
            </nav>


1. What is stopping the navigation bar from loading on mobile? Or the hamburger from displaying if the display is too small?

2. Could this be an issue with tiiny.host or is in the code?

trygeek

  • 5 O'Clock Shadow
  • *
  • Posts: 65
Re: DIY website not displaying navigation bar on mobile
« Reply #1 on: February 20, 2021, 11:03:58 AM »
So if you inspect this code you can see it works fine when I look at it on an MacBook Pro but on an iPhone 567 it goes back to hamburger menu. Hamburger menu is typical in mobile sites. Your @media screen and (max-width: 736 px)
#demo-main {
and all the @media queries that follow are what drives this. So if you really want this you can get rid of those media queries but then you won't have a mobile website.

frugalnacho

  • Walrus Stache
  • *******
  • Posts: 5060
  • Age: 41
  • Location: Metro Detroit
Re: DIY website not displaying navigation bar on mobile
« Reply #2 on: February 20, 2021, 12:32:13 PM »
I don't follow you.  I don't know what media queries are and I don't see it.

I only get the hamburger menu on mobile when I view the template directly from the templated site that I linked to above.  Once I download the template and host it myself everything looks exactly the same, except there is no nav bar at the top and no hamburger menu.  So on mobile the "homepage   left sidebar   right sidebar    no sidebar" doesn't appear, and there is no hamburger menu.  I intend to replace the "homepage  .... no sidebar" links with other pages on the site, and put the same thing at the top, so you can navigate to any other page from any page along the top.  Except on mobile no nav bar shows up, and no hamburger menu, so you just get the introduction page and can't navigate anywhere else.

frugalnacho

  • Walrus Stache
  • *******
  • Posts: 5060
  • Age: 41
  • Location: Metro Detroit
Re: DIY website not displaying navigation bar on mobile
« Reply #3 on: February 20, 2021, 02:15:41 PM »
Ok I think I found what you are talking about in the CSS files.  I've never opened up or edited a CSS file until just now, I was simply dropping everything as-is from the template.

I decided to put the files onto another server in case tiiny host was the problem.  I created a site at neocities and put the same folder online and it works better from that server for some reason.  I am now getting a black bar with the company name across the top on mobile, and if I click in the upper left hand corner I get a drop down of the links, except there is no hamburger menu icon.  It's functioning like it's there, but I can't see it.

nessness

  • Handlebar Stache
  • *****
  • Posts: 1047
Re: DIY website not displaying navigation bar on mobile
« Reply #4 on: February 20, 2021, 03:29:58 PM »
FYI using apostrophes vs. quotation marks (or single quotes vs. double quotes, as developers more often call them) is just a stylistic choice and doesn't affect functionality (so long as you use the same one to start and end your string).

Your problem very likely has to do with the css file(s), but I'm not really knowledgeable enough on css to troubleshoot it.

frugalnacho

  • Walrus Stache
  • *******
  • Posts: 5060
  • Age: 41
  • Location: Metro Detroit
Re: DIY website not displaying navigation bar on mobile
« Reply #5 on: February 20, 2021, 05:31:43 PM »
There were some other weird problems with the display on neocities so I switched yet again to host at 000webhostapp and everything is displaying perfectly now.  Company name is displayed right across the top and a nice hamburger icon appears in the upper left corner allowing access to the various pages. 

I plan to buy a domain and host it when it's complete so hopefully I don't run into any issues with that.

Daley

  • Walrus Stache
  • *******
  • Posts: 5269
  • Location: Cow country. Moo.
  • Where there's a will...
Re: DIY website not displaying navigation bar on mobile
« Reply #6 on: February 20, 2021, 06:30:21 PM »
Without being able to see the full source code or website itself, it could be one of two things given the snippet you included. I know I'm late to the party, but I'm answering questions specifically...

1) It could either be a lack of DIV containers being properly opened and closed for the header segment, or if the server is missing assets. When comparing your snippet with the source code, I don't know if the two actually not there before the logo DIV container comment properly closing it out and opening a new one for the logo, or if they're not there because you simply didn't copy/paste that far, you should have:
Code: [Select]
<!-- Header -->
<div id="header">
<div id="nav-wrapper">
<!-- Nav -->
<nav id="nav">
<ul>
<li class="active"><a href="index.html">Homepage</a></li>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
</ul>
</nav>
</div>
<div class="container">

<!-- Logo -->
<div id="logo">
<h1><a href="#">Linear</a></h1>
<span class="tag">By TEMPLATED</span>
</div>
</div>
</div>

(Protip: If you want people to debug your code but you don't want to post everything, at least post the entirety of the segment in question, or at least make sure everything is closed out.)

Given what's happened thus far, I doubt that's the case, however.

2) If they are there in your code, the only other cause I can think of is a lack of additional assets not being properly loaded onto or by the server, specifically:
../js/skel.min.js
../js/skel-panels.min.js
../js/init.js
../css/skel-noscript.css
../css/style.css
../css/style-desktop.css


Given how tiiny.site works, if you're only uploading the edited HTML file to their servers or flattened the directory structure to stick all the files in the same directory, there's your problem. You have to upload a ZIP file with all relevant files and folder structures included, structured like the ZIP file you downloaded of the template itself. Or, there could be directory or server issues.



Now, all this said, it's a template for a static website, which means no databases and no complex hosting. You're literally just delivering text and media files. Let me see if I can help you with some related tips that might make your life far, far easier, and lower the expected costs even further, and eliminate your need to try and deal with sketchy or bargain bin freebie hosting sites, even for prototyping.

1) You don't necessarily need a web server to test a static website. You can edit and open HTML files locally in any web browser, and if you did your SRC and HREF references properly, should function properly no matter where it's located.

2) You may already be in over your head if you're not comfortable with this level of HTML editing given how little you've actually edited in the actual quoted code, things that really should be edited and customized for your site. Responsive design websites are a bit more complex to deal with than old school, fixed format, HTML layouts. If you really want to edit by hand, be sure to use a text editor that supports coding, code highlighting, and can show you if you forgot to close something - something like Notepad++ will help. Given you want a responsive site design that works on both desktop and mobile screens, and you would probably appreciate something far more WYSIWYG in usability and development, give Mobirise a spin.

3) If you want a free "web server" to test static websites out on, or actually host the site for free because you're not looking at it being a huge traffic draw, look into Github Pages, which includes custom domain support. Fortunately, Mobirise can publish to Github directly, taking some of the guesswork out of it. No sketchy hosts this way, either. It also means you can do free hosting without a ton of ad links injected, or being locked into a proprietary editing system with no data/site portability to other hosts or ability to edit with other editors, like Wix and its ilk does.

4) If you find that you need to host a static website on a host that can handle more traffic than Github, look into NearlyFreeSpeech.NET, which is the best PAYGO equivalent of cheap but reliable web hosting. Honestly, though, Github can handle most smaller sites without a problem these days... especially if you pair it with CloudFlare handling your DNS. Also, don't bother with CPanel based hosts if you're running a static website, it's just unnecessary overhead and an additional layer of security vulnerabilities and hassles to deal with, especially with really cheap shared hosting providers using CPanel.

Good luck.
« Last Edit: February 21, 2021, 10:33:54 AM by Daley »

frugalnacho

  • Walrus Stache
  • *******
  • Posts: 5060
  • Age: 41
  • Location: Metro Detroit
Re: DIY website not displaying navigation bar on mobile
« Reply #7 on: February 21, 2021, 10:34:55 AM »
I am using adobe dreamweaver to edit the html and css files, although I don't think there was actually anything wrong with the css files.  Once I put it on 000webhostapp it loads just fine on mobile.  I did upload a zip file to tiiny host, but it doesn't display properly, when I uploaded the unaltered template zip.  Given that it works fine with 000webhostapp I doubt there is anything wrong with the code itself and might just be something with the way tiinyhost is displaying it.  Hopefully it doesn't become an issue once I buy a domain and pay to host it as a real site.

I've never dealth with a responsive web design before.  My last experience with putting together a website was back in 2010 or so, and it was just a straight html site that I hosted on godaddy.  It was super simple and plain, and the purpose was just to convey some information on the business with nothing fancy.  The business was fairly small and didn't want to hire a consultant to put together a website, so they asked if I could cobble one together, so I did and they liked it (despite me being an amateur) so I bought the company domain and put it on godaddy for hosting, and also used godaddy to switch the company over to using email@companyname.com to seem more professional.  That company ended up selling for millions, and in retrospect they probably could have afforded a professional to do the website, but the one I put together worked just fine.

I was checking the layout and design in dreamweaver, and also opening the files on chrome, firefox, and edge to make sure it looked like I wanted.  I didn't know how to get it to actually load on a mobile device without actually putting it online.  I also wanted to put it online so I could share the layout and design with my business partners - that's when I discovered it wasn't displaying properly on mobile (even though it displays properly in dreamweaver on mobile setting).  I think it was due to the web host though, because now that it's on 000webhostapp it's displaying perfectly.

The site is going to be pretty simple.  I just want a few different pages, nearly identical, but with different content.  One page about the company, one page about our qualifications, one page about how to contact us, etc.  Nothing fancy, just a static page that people can visit and get information about our company and contact us.  I only plan to update it periodically to update the qualifications and employee section as needed.  I don't expect it to get very much traffic at all, maybe only a few dozen hits per week even if the company grows into a multi million dollar business.  The website really has nothing to do with the business, other than a professional company should have website, because why not? And also we will need the domain so our emails can be @companyname.com.

Daley

  • Walrus Stache
  • *******
  • Posts: 5269
  • Location: Cow country. Moo.
  • Where there's a will...
Re: DIY website not displaying navigation bar on mobile
« Reply #8 on: February 21, 2021, 11:00:00 AM »
Sounds like it's definitely tiiny.host, then. You get quirky stuff like that with the free hosts trying to upsell.

As for mobile development, you can actually enable responsive design mode in Firefox's Web Developer or Chrome's DevTools without using a mobile device.

https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode
https://developers.google.com/web/tools/chrome-devtools/device-mode/

You can also fake it using user agent switching plugins for browsers and resizing the window manually, if you want to do it the hard way.

Glad you've got Dreamweaver, but it's kind of a sledgehammer tool for what you're doing, and doesn't hand-hold on the little details that give a site polish that most people miss, like metadata, favicons, and the like. And it's been a hot decade or so for me, but historically Dreamweaver did really sloppy X/HTML and CSS compliance back in the day, and I'm not sure how much that's been fixed, but I hated using it because of how messy the code was that it produced. If you're comfortable with it though, given you've paid for it, rock on.

Do keep Mobirise in mind for next time, however. It's a good tool that produces mostly clean code and solid responsive sites, especially for free, and really simplifies publishing to Github if you use them to host, which, with hosting limitations of 1GB total file hosting and a soft bandwidth cap of 100GB per month and TLD support compared to the restrictions of pretty much every other free webhost out there... why not? You're basically getting Microsoft's Azure platform to host your website for free.

And as far as email, provided you don't need more than five accounts (technically unlimited email aliases), give Zoho's Forever Free Plan a look.
« Last Edit: February 21, 2021, 11:02:53 AM by Daley »

MilesTeg

  • Handlebar Stache
  • *****
  • Posts: 1363
Re: DIY website not displaying navigation bar on mobile
« Reply #9 on: February 21, 2021, 05:11:42 PM »
I don't know how to code.  The extent of me building a website is using a template someone else made, and modifying it for my own use.  I am attempting to create one right now, but it's not displaying the top navigation bar when loaded on a mobile phone.

This is the templated I used:

https://templated.co/linear

When I load that link on my mobile it collapses the top nav bar into a hamburger menu that displays the links when clicked on.  When I upload the template online however it doesn't display the links or a hamburger menu.  I originally thought I had inadvertently messed up the code when I customized it, but the straight template is giving me the problem. Unfortunately I didn't realize it didn't load properly on mobile until I had customized it and all sub pages as well, as I was just checking how it displayed on my laptop until it was finished and I put it online.  I am not absolutely married to this template, this was just a test run to see what I could put together for free.  I don't want to post my customized code because it contains a lot of personal information.  Currently hosting on tiiny.host because it came up on a google search for free, and is exactly what I was looking for, an online host to park the folder and see how it would display via different browsers/computers/mobile.  I don't have a full enough understanding of what all the elements mean to know what's causing the error.

This is the code (note: I think the original template contains an error and used apostrophes instead of quotations in one line.  I updated them to quotations and highlighted them red.  The rest is unchanged from the template):

<html>
   <head>
      <title>Linear by TEMPLATED</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta name="description" content="" />
      <meta name="keywords" content="" />
      <link href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,700,500,900" rel="stylesheet" type="text/css">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script src="js/skel.min.js"></script>
      <script src="js/skel-panels.min.js"></script>
      <script src="js/init.js"></script>
      <noscript>
         <link rel="stylesheet" href="css/skel-noscript.css" />
         <link rel="stylesheet" href="css/style.css" />
         <link rel="stylesheet" href="css/style-desktop.css" />
      </noscript>
   </head>
   <body class="homepage">

   <!-- Header -->
      <div id="header">
         <div id="nav-wrapper">
            <!-- Nav -->
            <nav id="nav">
               <ul>
                  <li class="active"><a href="index.html">Homepage</a></li>
                  <li><a href="left-sidebar.html">Left Sidebar</a></li>
                  <li><a href="right-sidebar.html">Right Sidebar</a></li>
                  <li><a href="no-sidebar.html">No Sidebar</a></li>
               </ul>
            </nav>


1. What is stopping the navigation bar from loading on mobile? Or the hamburger from displaying if the display is too small?

2. Could this be an issue with tiiny.host or is in the code?

I would suggest getting a stack exchange account for these types of questions.

trygeek

  • 5 O'Clock Shadow
  • *
  • Posts: 65
Re: DIY website not displaying navigation bar on mobile
« Reply #10 on: February 23, 2021, 02:37:52 PM »
I don't follow you.  I don't know what media queries are and I don't see it.

I only get the hamburger menu on mobile when I view the template directly from the templated site that I linked to above.  Once I download the template and host it myself everything looks exactly the same, except there is no nav bar at the top and no hamburger menu.  So on mobile the "homepage   left sidebar   right sidebar    no sidebar" doesn't appear, and there is no hamburger menu.  I intend to replace the "homepage  .... no sidebar" links with other pages on the site, and put the same thing at the top, so you can navigate to any other page from any page along the top.  Except on mobile no nav bar shows up, and no hamburger menu, so you just get the introduction page and can't navigate anywhere else.

Media queries look something like this

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */


Your site deoesnt have that many but basically what they  do is tell
your site what to do with the CSS between two parameters:
so if your media query was this
@medi only screen
and(max-device-width : 767)  {
    background-color: red;
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
   background-color: blue
{

so this is just an example of media queries what this code would do is if the screen size is less than 767 pixels the background would be red. The next one is for an iPad it says if the screen size is between 768 pixels and 1024 pixels then the background will be blue. So using these queries you can change the whole site.