Hello All,

I have a problem with a hamburger menu displaying on a mobile device, everything is fine with the layout on a PC but on a mobile device, the whole menu displays & not the small hamburger type, do I need to post the code or the website name please?

Best wishes,

Graeme

Post the website name.

It's probably just your CSS media query

Hello,

I appreciate your help with this.  The problem is all is well with the code in a browser, but when viewed on a mobile, the 'Hamburger menu' is visible but the dropdown doesn't work!  I did get it to go once, somehow, but all the links on the drop down were out of line, thanks again, the website is at www.bgflooringneltd.com

I'm guessing you fixed it because the menu is working perfectly for me (iPhone 12 mini on iOS 17.6.1)

If you wouldn't mind - what was the issue?

I appreciate your help, I think it was a media query, I think I added this code to the index.html file

 

<script src="js/dropnav.js"></script>
    <script src="js/slider.js"></script>

 

Woah!

If you need to include two files to get your nav working somthing is very wrong with your code.

It works perfectly on my iphone. I suspect a caching issue - phones can take days to clear their cache.

You can build a fully responsive menu with hamburger and all the bells and whistles with about 10 lines of css and a single JS toggle function.

And if you used wordpress you wouldn't even need to fiddle with the code - all themes these days have responsive menus as standard.

Maybe there was something else!  Could you help me with something else?

 

15 minutes ago, Graemey said:

Maybe there was something else!  Could you help me with something else?

Sure. What needs fixing?

As an aside, you really are making life difficult for yourself hand coding everything. It's going to cause all sorts of issues later on down the line. A CMS would be far better. No need to ever touch a line of code again.

Thank you for this, very much appreciated.  Another friend advised me to learn WordPress, he set his server up for me so I'm ready to go, I have studied a little but intend to do more, just until then I'm hand coding.

I would like to create a CSS container to look like the attached image using this HTML code

<div class="container">
        <div class="text-content">
            
            <p>Your text content goes here. It will take up 75% of the width on larger screens and adjust responsively on smaller screens.</p>
        </div>
        <div class="image-content">
            <img src="imgs/maggie.png" alt="Description of image">
        </div>
    </div>

I'm nearly there but I want to start a fresh container as there were conflicts.  So back to the drawing board!  I did manage to do it before and the effect looked great where the image overlapped the top of the container, I think it was by using a negative top margin on the top of the container.  Thank you so much,

Best wishes,

Graeme

Use display: flex or display: grid

Both will do the job. For example:

<div class="container">
  <div class="text-content">
    <h1>Your Title</h1>
    <p>Your content goes here.</p>
  </div>
  <div class="image-content">
    <img src="your-image.jpg" alt="Your Image">
  </div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-content {
  flex: 1;
}

.image-content img {
  max-width: 100%;
  height: auto;
}

But...

Using wordpress you don't need to worry about this. Aligning images is built into the editor.

And if you use the above code you will probaly need a media query to sort things out on a phone.

Thank you, what a legend you are.  I'm certainly thinking of studying Worpress again soon, I have a few websites to sort first though.  I learned quite a lot from YouTube & purchased a book on it, found a few websites, my friend said I was looking to far into it!  Do you kno of any tutorial websites or anything?

You don't need a tutorial!

Install and login, click on Pages > New Page and start writing. Once you have done, click to publish (twice) and it's job done.

In the main menu (on the left) in Appearance you can change themes and set up your navigation menus.

If you then need to do anything else you can google for answers. There are thousands of support sites you can use.

Or just ask here.

The key with wordpress (and any other site) is to not worry about the theme. Nobody really cares. Focus on the content and play with the layout later. And even then, only ever build for a phone - that's the device most people use. And it's why the new bgflooringneltd site has so many issues.

Thank you, is it easy to edit a site in WordPress?  Do you still charge for your services if designing a website in WordPress?

1 hour ago, Graemey said:

Thank you, is it easy to edit a site in WordPress?  Do you still charge for your services if designing a website in WordPress?

Yes!

Much much easier than hand coding. And you have a built in blog (for writing about customer projects) and access to thousands of free themes and plugins.

Adding a secure contact form for example takes less than a minute.