kellyhutsbydesigns Posted November 10, 2020 Posted November 10, 2020 Site URL: https://dev-bcco.squarespace.com Hi. I've styled a drop down menu using some code from the Shwartz-Edmsiten site and adding some bits to it (some width and nowrap properties to accommodate the longer titles and added the transform property to bring the menu down the page). Can anyone help with an edit to the code so that the dropdown menu drops by 'however high the main navigation menu bar is' ? At the moment it's a set pixel height so that it sits exactly along the bottom of the menu bar, but when the screen resizes this no longer works exactly. I either need to add a calculation, or some kind of flex property, sadly this is the limit of my css editing abilities! Site: https://dev-bcco.squarespace.com/config/design/custom-csspassword: bcco Code below .header-nav .header-nav-item--folder .header-nav-folder-content {width: 300px !important; white-space: nowrap; padding: 0; .header-nav-folder-item { padding: .5em 1em; } .header-nav-folder-item:hover { background: #BDB26E; a { color: #57595C !important; } } } .header-nav-folder-item {background:#57595C; transform: translateY(28px); padding: .5em 1em; }
BrillWebsites Posted November 10, 2020 Posted November 10, 2020 Hi There is no real easy solution for this one as the menu can't calculate what size the header bar is going to be as its not contained within it. The menu is a child of the header-nav-item-folder element. What you could do, as a workaround is use media queries to change the position of the drop down for certain screen sizes - as it's the available width of the screen that is forcing the menu items to wrap onto a new line and this expands the heading. Long story short, adding these media queries will move the drop down according to a certain screen width - this was just by having a look at how high it was when the screen was moved. I'm doing this on the .header-nav-folder-content in one go so you will need to remove the translateY css on the .header-nav-folder-item elements. It starts at 800 as below that the mobile menu shows and there is no drop down. And the view changes around 1068px as the header moves onto a single line. Hope this helps! @media screen and (min-width:800px) { .header-nav-folder-content { transform: translateY(64px) } } @media screen and (min-width:1068px) { .header-nav-folder-content { transform: translateY(28px) } } 7321869_screenrecordingmenumoving.mov
joelygoe Posted December 2, 2020 Posted December 2, 2020 Hey guys, I have a question on the same code, which I have customised as much as I can but cannot get it to do what I want. It looks great but I want to be able to set the opacity of the whole dropdown background block to be say 0.7 then when I roll over an item, for that item block to change to opacity: 0.3 for example. I have successfully made the text opacity variable but not the other desired background elements mentioned above. It is important to change the opacity and not add something like 'rgba(0,0,0,0.3);' as I want the option when I am using different colour header configurations (Minimal White / Minimal Black) for that not to have an inverted / adverse effect. For example if I use 'minimal white' then 'minimal black' it doesn't work if you specify colours on an inverted space. Appreciate your help. Here is a link to the site - https://www.nintaidojo.co.uk/ And here is the current code: //Stylized Folder Dropdown Menu .header-nav-folder-content { background: transparent !important; } .header-nav .header-nav-item--folder .header-nav-folder-content { padding: 0.5em; left: -1em !important; right: auto !important; text-align: left !important; .header-nav-folder-item { padding: 0.5em 0.5em; } .header-nav-folder-item:hover { a { opacity: 0.5; } } }
tuanphan Posted December 5, 2020 Posted December 5, 2020 On 12/2/2020 at 5:01 PM, joelygoe said: Hey guys, I have a question on the same code, which I have customised as much as I can but cannot get it to do what I want. It looks great but I want to be able to set the opacity of the whole dropdown background block to be say 0.7 then when I roll over an item, for that item block to change to opacity: 0.3 for example. I have successfully made the text opacity variable but not the other desired background elements mentioned above. It is important to change the opacity and not add something like 'rgba(0,0,0,0.3);' as I want the option when I am using different colour header configurations (Minimal White / Minimal Black) for that not to have an inverted / adverse effect. For example if I use 'minimal white' then 'minimal black' it doesn't work if you specify colours on an inverted space. Appreciate your help. Here is a link to the site - https://www.nintaidojo.co.uk/ And here is the current code: //Stylized Folder Dropdown Menu .header-nav-folder-content { background: transparent !important; } .header-nav .header-nav-item--folder .header-nav-folder-content { padding: 0.5em; left: -1em !important; right: auto !important; text-align: left !important; .header-nav-folder-item { padding: 0.5em 0.5em; } .header-nav-folder-item:hover { a { opacity: 0.5; } } } Have you solved this yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
joelygoe Posted December 5, 2020 Posted December 5, 2020 5 hours ago, tuanphan said: Have you solved this yet? No.
tuanphan Posted December 8, 2020 Posted December 8, 2020 Add to Home > Design > Custom CSS .header-nav-folder-content { background-color: rgba(0,0,0,0.7) !important; } .header-nav-folder-content a:hover { opacity: 0.3; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
joelygoe Posted December 8, 2020 Posted December 8, 2020 1 minute ago, tuanphan said: Add to Home > Design > Custom CSS .header-nav-folder-content { background-color: rgba(0,0,0,0.7) !important; } .header-nav-folder-content a:hover { opacity: 0.3; } Hey this worked really well both on white on dark and dark on white because a low opacity black. For anyone else struggling with here is the full and final code that worked for me but you can tweak all the values yourself: //Stylized Folder Dropdown Menu .header-nav-folder-content { background-color: rgba(0,0,0,0.1) !important; } .header-nav .header-nav-item--folder .header-nav-folder-content { padding: 0.5em; left: -1em !important; right: auto !important; text-align: left !important; .header-nav-folder-item { padding: 0.5em 0.5em; } .header-nav-folder-item:hover { a { opacity:0.7; } } } Looks like this on a dark bg: https://www.nintaidojo.co.uk Looks like this on white: https://www.nintaidojo.co.uk/meanings Many thanks.
joelygoe Posted December 8, 2020 Posted December 8, 2020 If I wanteed to use that code to make adjustments to the rgba on a page by page level. Is there a way I might do this. For example I might write the code like this on Design > CSS /Stylized Folder Dropdown Menu.header-nav-folder-content { background-color: @linkBGColor !important;}.header-nav .header-nav-item--folder .header-nav-folder-content { padding: 0.5em; left: -1em !important; right: auto !important; text-align: left !important; .header-nav-folder-item { padding: 0.5em 0.5em; } .header-nav-folder-item:hover { a { opacity: @linkTextOpacity; } }} Then on each individual page change the variable: @linkBGColor: rgba(0,0,0,0.1) @linkTextOpacity: 0.7; If the above code is correct. How to I direct the @variable on the page?
tuanphan Posted December 8, 2020 Posted December 8, 2020 Wrap code in style tag & add to Page Header <style> CSS </style> Notes: You need to convert SCSS/LESS to CSS. Page Header wont' render SCSS/LESS Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
joelygoe Posted December 8, 2020 Posted December 8, 2020 4 minutes ago, tuanphan said: Wrap code in style tag & add to Page Header <style> CSS </style> Notes: You need to convert SCSS/LESS to CSS. Page Header wont' render SCSS/LESS Hi, I can't code. I only read then copy and paste so have no idea what t"Notes: You need to convert SCSS/LESS to CSS. Page Header wont' render SCSS/LESS" means. I have put the following in to Design > CSS //Stylized Folder Dropdown Menu .header-nav-folder-content { background-color: @linkBGColor !important; } .header-nav .header-nav-item--folder .header-nav-folder-content { padding: 0.5em; left: -1em !important; right: auto !important; text-align: left !important; .header-nav-folder-item { padding: 0.5em 0.5em; } .header-nav-folder-item:hover { a { opacity: @linkTextOpacity; } } } It is saying they are undefined. Then in Pages > Home > Advanced I have pasted: <style> @linkBGColor: rgba(0,0,0,0.1); @linkTextOpacity: 0.7; </style> and it doesn't seem to be working.
BrillWebsites Posted January 4, 2021 Posted January 4, 2021 On 12/8/2020 at 9:50 AM, joelygoe said: Hi, I can't code. I only read then copy and paste so have no idea what t"Notes: You need to convert SCSS/LESS to CSS. Page Header wont' render SCSS/LESS" means. I have put the following in to Design > CSS //Stylized Folder Dropdown Menu .header-nav-folder-content { background-color: @linkBGColor !important; } .header-nav .header-nav-item--folder .header-nav-folder-content { padding: 0.5em; left: -1em !important; right: auto !important; text-align: left !important; .header-nav-folder-item { padding: 0.5em 0.5em; } .header-nav-folder-item:hover { a { opacity: @linkTextOpacity; } } } It is saying they are undefined. Then in Pages > Home > Advanced I have pasted: <style> @linkBGColor: rgba(0,0,0,0.1); @linkTextOpacity: 0.7; </style> and it doesn't seem to be working. This was a while back but worth saying the SCSS/LESS is the use of variables (@linkBGColor and @linkTextOpacity). This is not valid CSS. It will work in the custom CSS as it converts it before putting it on the page. But CSS added to the page needs to be valid CSS. If you need paste the code in each page then there is no real advantage or need for variables. The same code you use in the original CSS code be pasted in the head of each page - with a different colour needed. Also nested selectors (classes within other classes) is not valid CSS so you need to change that too - which makes the 2nd opacity line much longer (but is the equivalent of the SCSS/LESS in custom CSS) Hope this makes sense!! <style> .header-nav-folder-content { background-color: rgba(0,0,0,0.1) !important; } .header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover a { opacity:0.7; } </style>
Recommended Posts
Archived
This topic is now archived and is closed to further replies.