I have used the same CSS rules to keep the footer in place at the bottom of each page, but my nav bar just scrolls up the page ignoring the CSS position: absolute rule.
I have also tried using position: fixed with the same results. I have no doubt that I have made a school-boy mistake in preventing this from working as I hoped it would.
A good page to view this would be on this page.
All suggestions or comments will be greatly appreciated.
Thank you.
I must be making a similar mistake, too, because I do not see a navbar at all. Just the menu icon. Could you maybe post a screen shot of the menubar?
This is embarrassing - I meant the menu icon, not my navigation. Please accept my apology for that oversight.
The navigation items come into view with a tap to the “hamburger” menu icon. It is the menu icon that I wish to lock in position as the page scrolls upward.
The menu-icon also has a CSS position: absolute rule that is ignored. This will be seen when you view the navStyle.css stylesheet.
Thank you.
This is what I see when opening your link:
I thought the menu was a misplaced flag of France.
It may look differently using different devices, but the menu stays put. The only issue I have, besides not recognizing the hamburger, is when opening, there is a quick white flash.
This is a screen grab showing the menu icon that I wish to control in the position it is seen in.
Thank you.
No problem. I sometimes overlook the obvious so I had to ask.
It sounds like you want to be using position:fixed but you said that you tried that and it didn’t work. Let me take a look at it and see what I can find.
In what way?
If we look at @brianfrank’s screenshot, we can see that the hamburger menu is out of place behind the title at narrow widths, but you can also see that although the title text wraps within the window, the top flows out of the window. There are at least a couple of issues, possibly related, that need to be addressed.
There are numerous errors in the CSS script which will have each individual browser trying to guess your intentions.
The validator output could be used to replace the previously copied CSS file which may provide a solution. If not it is best to at least eliminate possible inconsistencies.
Off-topic, but relevant:
In my opinion, it wouldn’t hurt to test your pages on different web browsers and whatever mobile devices you have. Once you figure out the CSS issues, you can always use media queries to fine-tune any discrepancies.
When I first built my site, it looked great on laptop/desktop using Internet Explorer. As I tested in Opera, Firefox, Chrome, Edge, and my mobile device, the pages varied.
Additionally, minimizing the laptop browser’s widths also varied the look and had to use media queries to adapt to the screen widths.
It is not feasible to create a different query for every screen width, but you can get close to providing the best UX/UI for your users by testing your pages as I described above.
Thank you very much for your help. I will take a look at each of my @media queries and see if I can rectify the menu icon issue.
I know that the site appears normal at 768x1024 px, but begins to collapse markup-wise at 640x960 px and smaller. The menu icon is nowhere to be seen, leaving behind the “hamburger” icon in the middle of the view.
I have much work to do to correct these issue. I appreciate your help.
Thank you very much for making clear the CSS inconsistencies within my code. I have already taken a look at the results of the validation.
I appreciate all of your help.
Thank you very much for all of your comments and suggestions.
I have begun to use Chrome for my testing and find the device toolbar inspector to be helpful for viewing webpages in different viewing media. Hopefully, all of these things will pin down - and help correct, my menu icon issue.
I sincerely appreciate all of your help.
@santafe, are you still around?
Yes, sir.
My life is such that my woodworking keeps me in the shop during the week and most of Saturday. Sundays I try to spend improving my website and bugging everyone in this forum. I have no idea how I would have gotten by without all of the incredible help I have received from guru’s such as yourself and others.
Thanks
I have not taken the time to read your previous threads so I would like to ask for some background info.
(1) May I ask which browsers you use to test your site?
(2) Do you program JavaScript? (I ask because I do NOT.)
(3) Is most of your CSS copy-n-paste from users contributions or do you generally understand how to write HTML and CSS?
Most of the vendor prefixes included in your CSS are not necessary nowadays. I’m sure they are there because you started this site at least two years ago when they were needed.
Many people use JavaScript “add-ons” such as modernizr to simplify the coding of their site or the consistency of the user experience. Unfortunately, they tend to forget that those aids are dated and need to be updated occasionally. Your version of modernizr is 2.8.3, the current version is 3.5.0. I don’t use modernizr (perhaps I should) but I feel sure that replacing your version with the current version would help your code.
Likewise, the “reset” that you are using may need to be updated. “Resets” are subject to evolution, too. 
I do not use a formal “reset” at all. To me, they are overkill - some of which has to be edited out of the reset or overridden later in the code.
Minimize unnecessary duplication of code. For example, the same “box-sizing” “reset” appears at the top of several stylesheets. It should only appear once. The version that you adopted is not the best version, either.
this is outdated (as is the need for these vendor prefixes), (see https://caniuse.com/#search=box-sizing)
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
this is recommended (see https://css-tricks.com/box-sizing/)
html {
box-sizing:border-box;
}
*, *::after, *::before {
box-sizing:inherit;
}
There are many other examples of unnecessarily duplicated CSS.
Trailing slashes on empty HTML elements such as <img....>,<link...>, and <meta...> are not required. They have never been part of the HTML specs. Their use is a carryover from XHTML. According to HTML level 5 specs, they are tolerated, thus the validator does not flag them as errors.
The problem with your inability to position the menu-text and menu-icon as you wish is rooted in the fact that the menu code is not properly assembled within a parent container using the same units of measure… and then there are the media queries. It is awkward to troubleshoot because the “menu” code is on two stylesheets that interact. You should be able to rectify that as you go through the process of minimjzing duplicate CSS and grouping related rules on one stylesheet.
I would rather talk about the details of fixing the menu-text and icon after you have cleaned up some of the CSS, if you don’t mind, mainly because I’m not sure yet how you want them to behave. Is the icon code part of jQuery? If not, where did you get the icon code? I’d like to read about it.
EDIT:
This screen clip is the way most people view your menu-text and icon:
This is the way I see it using Firefox and increasing font-size to 140% (see the URL bar):
Cheers for now. 
Thank you SO much for your in-depth comments and suggestions. I have already begun to clean up the CSS as you have suggested.
As to the menu: I wanted my navigation to be very “subtle” and not so much “in your face”. When I began the wwbydesign.com sit, I wanted my navigation to be on its own page but had no idea if that was even possible. I somehow came across codyhouse and it was there that ( I believe …) that I discovered their hamburger style menu.
I will have a full report for you this Sunday. You have given me a boat-load to think about.
As promised, I will answer all of your questions as best I can.
(1) May I ask which browsers you use to test your site?
Normally I only test my webpages on Safari and Chrome. I make extensive use of Chrome’s media device inspection section which I find useful. I also use a Safari plugin (ResizeMe) that does the same thing as best I can tell.
(2) Do you program JavaScript? (I ask because I do NOT.)
I do not. I am currently enrolled in an on-line js course, but have not found the time to complete it. I want to learn the basics of js so I will at least have some understanding of why it is included in nearly every webpage currently in use. In a similar vein, I have been learning php over the past several years and am slowly converting all of my sites to php.
(3) Is most of your CSS copy-n-paste from users contributions or do you generally understand how to write HTML and CSS?
There are two cases of c&p that I am guilty of (that I can recall at least):
(1) The navigation system CSS that I use in my woodworking website which came from codyhouse and
(2) I needed help with the gradient that I use and that help came from within this forum.
The codyhouse markup was really an add-on, because the website already had a navigation system (that I did not like). Looking back on that, it was probably a small miracle that it worked as well as it originally did. The CH navigation had a lot of features that I changed and that took a great deal of time to (understand) get working
I have worked nearly every tutorial in two editions of David Sawyer McFarland’s “CSS The Missing Manual”. His books, IMHO, are the best on the subject. He covers every aspect of CSS in great depth. Mistakes I make in my markup are due to my forgetfulness and not because he did not cover the particular style I butchered. Another reason that I like these books is because their index is second-to-none. When I need help, that is where I first look.
I now keep a log of styles that I find useful but not often used. I find this practice very useful because I may work on my websites perhaps four days out of a month. I wish I had more time to devote to my websites, but I do not and the log helps a lot.
Thank you very much for the link to the “caniuse” website. I hear you loud and clear on the outdated vendor prefixes. You are absolutely correct about the “evolution” factor of these add-ons. A few days back I took a look at my current version of jQuery - it was v2… The current version is v3.3.1. I will have to update all of those as well.
As to resets, I will adopt your recommended markup. And, yes, I totally agree, there is a lot of extraneous CSS that has to be cleaned up in my website. In my defense, I thought at one time it would be beneficial to separate styles according to what they affect, such as navigation, major and minor pages (that I use to separate my webpage styling) and so on. However, I now am completely cognizant of the benefit of having a single style sheet. I think separating the styles is how I managed to butcher my navigation icon. At one time it did stick to the top of the browser. Now it does not.
Another benefit of a single style sheet is keeping the media queries in one place. I ran the codyhouse navigation demo on several media devices and the navigation behaved perfectly. In most cases the text and icon remained together, but only the icon was visible on much smaller devices.
Yes, I agree that it would be best for me to clean up my CSS before we can discuss the errant nav icon and text. However, I would bet that once I have all the styling gathered in a single style sheet, the navigation with operate correctly as it once did.
Thanks again for all of your comments and suggestions. Your help is sincerely appreciated. I will be back in touch as soon as I have all of the CSS cleaned up. I will be converting all of my html pages to php as well as I make these changes.
I will try to check in weekly so the thread does not close.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.