Can anyone help me understand why the menu preset on the site https://www.drjamescrossley.com/ (381865) - is not full width, until i start scrolling down the page? I’ve tried making all the containers & the menu 100% width, but nothing seems to change.
It is referenced in the blog module, which does seem to be full width if i change the background colour, but i think it must be something about how sitejet organises content inside containers that im not understanding, or maybe some css / code that is overriding the settings?
Also when i load the site it first shows a different font, and the images (which are small file sizes) don’t load immediately. There is also sometimes a white space underneath the 1st banner / background image, until i scroll, which might also be something to do with the menu settings. I assuming the hosting of sitejet is plenty fast enough for such a basic site
I would like the menu to be the same full width as when scrolling (on laptop) & for it to have a semi transparent when at the top, and then a solid colour background when scrolling (as it does), or if thats not possible just a solid background. And for the site to load correctly straight away.
And i also would like to know how to change the Menu items to be Title Case (Tt) instead of Caps (TT) as changing that in the settings also doesn’t change the output.
Any help and specifics to amend these would be very much appreciated.
As I read your question on mobile phone and couldn’t check on desktop, I want to give some quick ideas for just some of the topics:
Have you checked if the images are set on lazy load and this causes an unexpected delay?
The all caps style of the menu is also a style setting. I am not sure if you can find it in the container settings or menu settings. Or probably a CSS thing that comes with the template?
Some templates come with extra CSS code which (as a non-coder like me) can cause the situation that changes in settings do not work.
Ah thanks @Barbara_Bichler, i did set them all to lazy load, so maybe thats the issue. The rest must be a css thing as i started with a bit of one the templates, so not sure how to change that.
Thanks @Martin - I didnt solve it, but i did change the min width to default from 100% to return it to the previous behaviour. The top menu (before i start scrolling) does look full width as i’ve put it on transparency background, but add a colour it just blocks out that bar (not full width) until you scroll, which for some reason is then full width. If i change the min width to 100% then the starting menu bar stays the same dimensions but when scrolling it is completely full width so the contents expand. Do you know why this is & how to make the settings respond to both situations? I do need to add a background colour so that the reference / blog works as the menu is white text & blog header is white background. Plus i would also like to understand as i can’t find this in the manual)
And do you know how to change the css for the menu title case, and why the different fonts load first?
How to make the menu full width colour in its starting position at the top. (Only work around was to make transparent)
Would you be able to provide us with a screenshot or screencast to show us what it looks like for you? Just like to check if we are on the same page here.
How to make the menu title case Tt instead of Caps TT
Thanks @Andre ! Didnt see those text transform settings
Re menu scroll - If you see the orange selection box around the menu bar - this is the area that the menu covers if i change the background colour, until i scroll,
And if you pause the screencast at 1 second it shows how the fonts look when loading the site and and how they change to the ones that are set (both when loading site in browser or from builder)
And this video shows how the menu bar kinda ‘jumps’ between the transparent version & the blue background version - https://nimb.ws/OI1Kp6 - though it’s not urgent to change if thats just the way it is.
sooooo, “globally” the website a width for containers that is 100 rem. Under design you can change that.
As this menu is in a container, it adjusts to that. When you scroll down, the menu gets position: fixed and therefor goes out of the container for that and adjusts to the full width.
I would suggest keeping it that way because for that template it could cause issues.
Regarding the fonts, I have asked a developer to look into this.
The “jump” will be fixed for you in that page. Actually, we fixed it for that template a while back already and this should not have happened.
Hey @Marc_Narrative - so the font issue should already be resolved. the page loads very fast and I can not see any issue there anymore. Can you confirm that?
Regarding the jump: The banner height has been set to 520px with padding-bottom. This caused the issue and took some luck to discover. I have removed the padding and set the height directly in the respective container.
The banner height looks good on the desktop, but it doesnt work on mobile, so i think thats why i set it. Could you update it so the banner shows fully on mobile / ipad again? (only tested on mobile / desktop)
The font issue was the same when i first loaded site, but once its loaded into cache it loads really quick & not apparent. Be great to solve if its possible, as looks likely to happen on slower connections.
Ahh i understand the interface a little better through this now. Yep i found the min size for banner container & set it for devices & that works Thanks Andre
For context - I didn’t know where or what to change originally so it took me a good while to find that adjusting the padding adjusted the banner size cross platform. Now i understand that the min size of the container for the specific element is where we make this happen, and switching to the different views means we are setting for that specifically. I did watch all the early walkthrough tutorials and tried to find in the online documentation but a lot understanding the interface has come from trial and error. I imagine i missed something, but if not it would be really helpful to have more on the user manual side if this becomes possible. I think video tutorials do help with attracting new sitejet customers too, especially if it can be shown to be more easy, powerful & intuitive than front end builders like divi.
The font issue is still the same when loading on desktop & this random preview link is coming up when i do a search for the site url in google for some unknown reason - http://1f8142-5d3a9.preview.websitebutler.de/
Really appreciate your help and if theres any guides that become available or i’ve missed i’d love to learn the interface really fully. (I’ll go through the older videos again too ) )
Could you send me a screenshot of the search? I can only find this community thread when “googleing” for the website. You might want to remove the URL here.
Apologies for delay Andre seems its gone when i search now too. No idea what it would have related too as it had the .de ending to the url but seems only the font issue remains
