Can I Remove Header Background Squarespace On Mobile Basil
Basil Template: This website template's special scrolling effects and full-bleed banners give your customers a stunning visual experience.
Notes
- Calculation Custom CSS toHome > Design > Custom CSS
- With One page. Add code to Page Settings > Advanced > Header (If you lot use Personal Program > Edit Page > Add Lawmaking Block > Add Lawmaking)
- Calculation !of import to after, if CSS doesn't work! for example: font-size: 20px !important;
- Ship me a bulletin if you accept any questions/the code doesn't piece of work (free).
- You canship a donation if this is helpful for you 😉
Site Title Color
Unabridged Site
/* Desktop */ .Header-branding { color: #ff0000 !important; } /* Mobile */ a.Mobile-bar-branding { color: #ff0000 !important; } One Page
<style> /* Desktop */ .Header-branding { color: #ff0000 !important; } /* Mobile */ a.Mobile-bar-branding { colour: #ff0000 !important; } </style> Disable Site Title Link
a.Mobile-bar-branding { pointer-events: none; } .Header-branding { arrow-events: none; } Remove Site Title
Entire Site
.Header-branding { visibility: hidden; } a.Mobile-bar-branding { visibility: subconscious; } I Page
<manner> .Header-branding { visibility: hidden; } a.Mobile-bar-branding { visibility: subconscious; } </style> Navigation Hover Color
.Header-nav-item:hover { color: #ff0000 !important; } Strike Navigation Hover Item
.Header-nav-detail:hover { text-ornament: line-through; } Hide Navigation Detail
First Particular
.Header-nav-item:nth-child(1) { brandish: none; } Second Detail
.Header-nav-item:nth-child(ane) { display: none; } Practice similar!
Turn last Navigation detail to Button
.Header-nav-item:final-kid { background: #fff; colour: #000 !of import; padding: 5px 10px !important; edge-radius: 50px; font-size: 15px; } Remove Navigation
Entire Site
.Header-nav { display: none; } One Page
<style> .Header-nav { display: none; } </style> Logo (Right) – Navigation (Left)
.Header-inner.Header-inner--lesser { flex-direction: row-contrary; justify-content: space-between; } [data-nc-container="bottom-middle"] { brandish: block !of import; flex-abound: 1 !important; } [data-nc-base of operations="header"] [data-nc-container="bottom-right"] { text-marshal: left; justify-content: flex-start; } [information-nc-base of operations="header"] [data-nc-container="bottom-left"] { text-marshal: correct; justify-content: flex-end; } Remove Hamburger Icon
push button.Mobile-bar-card { display: none; } Replace Hamburger Icon with Custom Image/Icon
button.Mobile-bar-carte du jour { visibility: hidden; } button.Mobile-bar-carte:after { visibility: visible; content: ""; background-prototype: url(https://image.flaticon.com/icons/svg/1279/1279537.svg); background-echo: no-repeat; background-size: incorporate; background-position: heart centre; width: 30px; height: 30px; display: block; } Replace Hamburger Icon with give-and-take "Menu"
button.Mobile-bar-menu { visibility: subconscious; } button.Mobile-bar-card:later on { visibility: visible; content: "Menu"; font-family unit: proxima-nova; color: #000; font-size: 20px; } Add word "Menu" abreast Hamburger Icon
button.Mobile-bar-carte du jour:before { content: "Carte du jour"; font-size: 20px; color: #000; position: absolute; right: 50px; top: 25px; } Navigation Overlay Background Color
.Mobile-overlay-menu { background: #f1f2f3; } .Mobile-overlay { background: #f1f2f3 !important; } button.Mobile-overlay-close { groundwork: #f1f2f3 !important; } Navigation Overlay Width
.Mobile-overlay { width: 70%; } Change Hamburger Icon Colour
push.Mobile-bar-card svg { stroke: #ff0000; } Change "X" close icon colour
.Mobile-overlay-shut svg { stroke: #000; } Marshal Centre Navigation Overlay Items
.Mobile-overlay-nav-item { text-marshal: center; } Footer
Footer Groundwork Color
Entire Site
footer.Footer { background: #000; } One Page
<style> footer.Footer { background: #000; } </manner> Footer Background Image
Entire Site
footer.Footer { groundwork-epitome: url(https://beaverhero.com/wp-content/uploads/2019/07/java-beans-1082116_640-min.jpg); groundwork-size: cover; background-position: center eye; groundwork-echo: no-repeat; } One Page
<style> footer.Footer { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-size: embrace; background-position: centre center; background-repeat: no-echo; } </fashion> Remove Footer
Entire Site
footer.Footer { brandish: none !important; } I Page
<style> footer.Footer { brandish: none !important; } </mode> Other
Page Background Color
Entire Site
.Main { background: #000; } One Page
<fashion> .Main { background: #000; } </fashion> Folio Background Image
Entire Site
.Main { background-prototype: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-repeat: no-repeat; groundwork-size: cover; background-position: center center; } Ane Folio
<style> .Main { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); groundwork-echo: no-repeat; background-size: cover; groundwork-position: middle center; } </style> Weblog
Remove Post Featured Prototype
.BlogList-particular-paradigm { brandish: none !important; } Remove Post Date
time.Blog-meta-item.Weblog-meta-particular--date { brandish: none; } Remove Postal service Excerpt
.BlogList-item-extract { display: none !important; } Remove Post Title
a.BlogList-item-championship { display: none !important; } Remove Separator under Posts
.BlogList-item:earlier { display: none !important; } Increment Postal service Date Font Size
time.Web log-meta-detail.Blog-meta-detail--date { font-size: 20px; } Remove Social Share Icon
.BlogItem-share { display: none; } Remove Previous/Next
.BlogItem-pagination-link-label { brandish: none !of import; } Remove white spacing between Postal service Detail Page & Header
.view-particular.collection-type-blog .Principal-content { padding-top: 10px; } Featured Image: Squarespace.com
Can I Remove Header Background Squarespace On Mobile Basil,
Source: https://beaverhero.com/basil-template-squarespace/
Posted by: matterfinge1992.blogspot.com
0 Response to "Can I Remove Header Background Squarespace On Mobile Basil"
Post a Comment