Using HTML Editor to modify an...

User 2361117 Photo


Registered User
115 posts

In perusing the different forums, I really didn't know where to post this question so I selected HTML Editor (paid edition) since this is the app I presently use in making changes to my website. My question is as follows: my recently redesigned responsive website appears to perform flawlessly on mobile devices, laptop, and desktop computer with the exception of one problem that only occurs on my desktop computer with a wide screen display. The behavior I am presently experiencing only occurs on three of my website pages whereby my navigation menu positioned along the top of each page disappears (instead of sliding down and displaying at the top of my screen as it does on my other pages) when viewed on my larger desktop display monitor as I scroll down the page. Has anyone by chance experienced this behavior and, if so, how did you resolve this issue. To view the behavior I have described, my website url is: www.inspectabuilding.com
Once again, you will only see this behavior happening in using a larger display/flat screen monitor meaning that the behavior described herein appears to be nonexistent when viewing on a laptop or mobile device.The three pages affected are my about page, risk management page, and scope. Thank you ahead of time.
User 2088758 Photo


Senior Advisor
3,105 posts

Hi Boilermaker,

I cannot replicate your issue. I have opened it up on a 48 " Samsung with no issues with menu on any pages. I scroll down and them menu appears at the top. How big are you going?
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 122279 Photo


Senior Advisor
14,547 posts
Online Now

On my 22" screen I can see what you mean. I think the problem with the menu not appearing when scrolling down is because those three pages don't have enough height to reach the position where the menu appearance is triggered. I think if you either adjust the trigger value (how many px you have to scroll down before the menu appears), or give those pages a bit more height, the problem will be solved.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2088758 Photo


Senior Advisor
3,105 posts

oh I see what you mean. Good catch Inger.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 122279 Photo


Senior Advisor
14,547 posts
Online Now

I've recently made the same mistake myself, and Wayan was the one who set me right :lol:

See? You can always learn something from your mistakes ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2361117 Photo


Registered User
115 posts

Thanks for the quick response. BTW, I neglected to mention in my initial post that my desktop flat screen monitor is around the same size as Ingers or 22 to 24 inch screen. As for Inger's reply, I was thinking the same thing with regard to height since the pages that don't exhibit this behavior have more content in the way of images and/or text resulting in more height which makes sense as they do not exhibit this behavior. As for increasing the height for the three pages in question, correct me if I am wrong but I would think that I should use inline CSS on these three pages in order to override any external CSS in regard to height. Would any of you agree?
User 122279 Photo


Senior Advisor
14,547 posts
Online Now

I don't know if it matters much where you change the css.
Your site seems to have been built manually in Bootstrap. Is every page based on one and the same 'master' template, so that if you change something, then that will affect all the other pages? If so, you could give some elements on the three pages an extra class and write some rules for that class.

I found this in your file script.js:
//Update header style + Scroll to Top
function headerStyle() {
if($('.main-header').length){
var windowpos = $(window).scrollTop();
if (windowpos >= 250) {
$('.main-header').addClass('fixed-header');
$('.scroll-to-top').fadeIn(300);
} else {
$('.main-header').removeClass('fixed-header');
$('.scroll-to-top').fadeOut(300);
}
}
}
headerStyle();

What if you, instead of changing the css, play with the value windowpos >= 250? Try setting it to just 200? Or something?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2361117 Photo


Registered User
115 posts

Thanks for the tip. I will definitely try this out since, while modifying the CSS will address and prevent this behavior from happening, it ends up adding too much white space above and beneath my text content and image on each page that exhibited the behavior described in my initial post. My thought is that by modifying/playing with the windowspos in the js as you suggest may hopefully resolve this issue without having to add more white space. I will give it a try and let you know. Thanks again for the tip.
User 2361117 Photo


Registered User
115 posts

I just wanted to once again thank Inger for the js script tip in regard to playing around with the windowpos settting. What I ended up doing was changing the windowpos setting from 250 to 150. While this worked for two of three pages, a lower setting was needed to address the remaining page. However, as mentioned in my previous reply, the lower setting ended up adding too much white space above and beneath my text content. What I ended up doing to resolve this was to keep the windowpos at 150 and add an inline css to modify the padding settings in only one page. While this in turn prevented the added white space (still a little bit more than I would like), it resolved the original navigation bar issue on the remaining page. If anyone would like to take a look, the website address is: www.inspectabuilding.com and the three pages are under scope, risk management, and the about page. Thanks again for the help. It's most appreciated.
User 122279 Photo


Senior Advisor
14,547 posts
Online Now

Glad you got it working! :) No point in me taking a look now, as I'm away from home and my desktop monitor. But I'll take a look tomorrow.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.