Categories
blog HTML scottsworld

Menu changes

I have been fiddling with side menu for over a year, was having issues with when it was open it did not scroll with the page and on long pages could not be seen. I recently changed the main page on Cactus Wren to a responsive set up and the side menu in the test page broke the whole set up when opened so it was time to find something else. Cactus Wren with the new menu now will display normally as two columns of content and on mobile devices the right column drops under the left and shows as one long page.

The top menu was deployed there first and now has come to all of the website except the genealogy pages and Woodward pages. For some reason the Woodward pages do not obey the container settings and the menu is all messed up. Still have not figured out the weirdness for that. I suspect maybe something to do with the image back ground which is unique to those pages. The The Next Generation of Genealogy Sitebuilding v. 12.2, Scotts ancestors and Captain Henry Woordward’s descendants are a PHP set up like WordPress so they are a different challenges to change.

I have changed my WordPress theam to 2020 which allowed me to have a blue menu header with links. Still investigating on how to do drop down buttons on it like the rest of my site. I found the drop down buttons on WC3schools. I looked at several and there was only one that allowed me to have multiple drop down buttons with different menus some would show the first menu on child buttons and basically just plain text. I had to experiment with their menus until I found this set up.

If you have seen a lot of menu code they often involve styling list items. This has no list for the menu links and no class to style the url links either. I did have the buttons open the main URL but when using it mobile with no mouse it made it difficult to access the drop down menu so I removed the links in the buttons and now they just activate the drop down menu. It is a combination of HTML, CSS and java script to make it work. At first it was not working on the duckduckgo android browser, the buttons did not appear and the links showed on the blue background. I did not change anything and it now is working.. Works on all the browser combinations I have tried.

WordPress has been updated to the latest version. I also made a change of the fonts on the website. I have wordpress showing serif but not the Faustina variable font I picked from Google fonts yet, another change I need to research. I did that after a recent class Udemy html5 class assignment to pick 4 favorite fonts and show them in the assignment.