Hi, There!
I’m really no expert, but I managed to solve some of the known issues of the Mountains Theme that came with Rapidweaver 8.
1) Menu not working properly on mobile Devices
The Menu is placed behind the Title. In the area, where the Title is, the Menu items can not be selected. I found this code on the internet, that brings the menu on top. Unfortunately this is not working, where the menu overlaps the maincontent area, so I simply reduced the number of menuitems. Add the following code in the Settings/Code/CSS - Area:
/* Adjust navbar to top and above other content */
.navbar {
position: relative;
z-index: 999;
width: 100%;
text-shadow: 1px 1px 3px #101010;
}
I added a Textshadow in this case.
2) Bad visibility of the Menu in Mobile Version
To improve the visibility you can darken the Background of the menu while hovering with the mouse over it. Simply add the following lines:
.navbar:hover {
background-color: rgba(0, 0, 0, .5);
}
RGBA will make a black (0,0,0) with a 50% Opacity. If you use the opacity property instead of rgba the complete menu, including the text will get that opacity.
3) How to jump to the content after klicking Menu item
I discovered, that if you click the menu, the linked Site loads at it’s top. There is the Screen-filling Banner. That is OK for me at the first Page, but if I click links, I want to jump to the Content. To do so, you simply set an anchor at the top of the Content, i.e. <a name="content"></a>. You then add in the JavaScript-Area (Right Side / Inspector, 3rd Button (HTML), then select the Tab JavaScript): window.location="#content". That causes the Site to jump to the “content”-Anchor at loading, so you avoid scrolling through the whole banner everytime.
4) Overlapping Picture and Widget in the Right Floating Stack
Less a problem with the Theme, but rather with the Stacks: I had the Problem, that I combined a Picture and a Widget, that Simply produces another Picture with live Dates in a Stack. On Mobile Devices the Widget covered the Picture, I wanted to reverse this, so the Picture lies on top. This can Simply be done by adding in the <style... Property Somehere the Property z-index: -1; This will bring the Widget behind the other items in the Stack.
5) Own Errorpage
I created an own 404-Errorpage. If you do so (ask your provider how to turn this on, in my case it worked by adding the Line ErrorDocument 404 (add your URL to yor Errorpage here) into the .htaccess-File. Youn can access it in the Publishing Area by clicking the Button “Edit .htaccess. File”
If You do so, you need to obey 2 rules:
1.: Use an absolute URL (https://www.yoururl.com/yourerrorpage.html) in the .htaccess. Otherwise the Menu will not be working if you call a not existing Diretory or a not existig Site in any Directory but the root.
2.: In Settings / Advaced do NOT select “File Links are relative to Page”. If you do so, you will loose your Banner Picture and Formatting.
6) 2 Special Characters you need to get the mobile-Version working
To separate Words when ist’s not fitting into narrow screens use ­ within the word i.e. separation­character = separationcharacter. The ­ disappears on wide screens and leads to an “-” in narrow screens.
The Opposite ist the protected hyphen: ‑ It avoids the separation within a word, i.e. COVID‑19 = COVID‑19.
These are some of the things I discovered and hope to help some of You solving these Problems.
If you have further Ideas (in example how to get rid of the downward-Arrows in the Bottom-Menu) please let me know.
Greets
Pyrhu