Website: Update margin of CTA buttons and header navigation menu (#39629)

Changes:
- Increased the margin on the desktop header navigation menu to prevent
the dropdown menus from overflowing outside hte page's container at
certain widths
- Removed the right margin from "Get a demo" buttons
This commit is contained in:
Eric
2026-02-10 13:40:50 -06:00
committed by GitHub
parent f378831d71
commit b7ede4f20f
7 changed files with 16 additions and 12 deletions
+4
View File
@@ -566,6 +566,10 @@ html, body {
height: 12px;
margin-left: 4px;
}
&[button-text='More'] {
// FUTURE: remove this when try it yourself buttons are uncommented;
margin-right: 70px;
}
}
[purpose='header-nav-btn']:hover {
// font-weight: 700;
+4 -4
View File
@@ -369,16 +369,16 @@
</div>
<%}%>
</div>
<!-- <div purpose="mobile-nav-cta" class="d-flex flex-row align-items-center">
<div purpose="mobile-nav-cta" class="d-flex flex-row align-items-center">
<a purpose="glass-header-btn" class="align-items-center d-flex" href="/contact" no-underline>Get a demo</a>
<a purpose="layout-animated-arrow-button" class="start-cta-continue-button" href="/try" no-underline>
<!-- <a purpose="layout-animated-arrow-button" class="start-cta-continue-button" href="/try" no-underline>
Try it yourself
<svg purpose="animated-arrow" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
<path purpose="arrow-line" d="M1 6H9" stroke-width="2" stroke-linecap="round"/>
<path purpose="chevron" d="M1.35712 1L5.64283 6L1.35712 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div> -->
</a> -->
</div>
</div>
</div>
<%/* Desktop Navigation bar */%>
+2 -2
View File
@@ -823,7 +823,7 @@
</div>
<div purpose="button-row" style="margin-top: 40px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
<a purpose="cta-button" href="/contact">Get a demo</a>
<a purpose="cta-button" class="mr-0" href="/contact">Get a demo</a>
<!-- <animated-arrow-button href="/try">Try it yourself</animated-arrow-button> -->
</div>
</div>
@@ -913,7 +913,7 @@
<h4>Open device management</h4>
<h2>Your last MDM migration</h2>
<div purpose="button-row" style="margin-top: 32px;" class="d-flex justify-content-center align-items-center mx-auto">
<a purpose="cta-button" href="/contact">Get a demo</a>
<a purpose="cta-button" class="mr-0" href="/contact">Get a demo</a>
<!-- <animated-arrow-button href="/try">Try it yourself</animated-arrow-button> -->
</div>
</div>
+1 -1
View File
@@ -1452,7 +1452,7 @@
</div>
</h1>
<div purpose="button-row" style="margin-top: 40px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
<a purpose="cta-button" href="/contact">Get a demo</a>
<a purpose="cta-button" class="mr-0" href="/contact">Get a demo</a>
<!-- <animated-arrow-button href="/try">Try it yourself</animated-arrow-button> -->
</div>
</div>
+2 -2
View File
@@ -27,7 +27,7 @@
<p>Ship data to any platform like Splunk, Snowflake, or <a href="/docs/using-fleet/log-destinations">any streaming infrastructure</a> like AWS Kinesis and Apache Kafka.</p>
<% }%>
<div purpose="button-row" class="d-flex flex-sm-row flex-column justify-content-start align-items-center">
<a purpose="cta-button" href="/contact">Get a demo</a>
<a purpose="cta-button" class="mr-0" href="/contact">Get a demo</a>
<!-- <animated-arrow-button href="/try">Try it yourself</animated-arrow-button> -->
</div>
</div>
@@ -271,7 +271,7 @@
<h4>Open orchestration</h4>
<h2><%= pagePersonalization==='eo-security'? 'Instrument your endpoints' : 'Talk to your computers'%></h2>
<div purpose="button-row" style="margin-top: 32px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
<a purpose="cta-button" href="/contact">Get a demo</a>
<a purpose="cta-button" class="mr-0" href="/contact">Get a demo</a>
<!-- <animated-arrow-button href="/try">Try it yourself</animated-arrow-button> -->
</div>
</div>
+2 -2
View File
@@ -6,7 +6,7 @@
<h1>Manage software consistently</h1>
<p purpose="hero-text">Pick from a curated software catalog or upload your own custom packages. Configure custom installation scripts if you need or let Fleet do it for you.</p>
<div purpose="button-row" class="d-flex justify-content-start">
<a class="btn btn-primary" purpose="contact-button" href="/contact">Get a demo</a>
<a class="btn btn-primary mr-0" purpose="contact-button" href="/contact">Get a demo</a>
<!-- <animated-arrow-button href="/try">Try it yourself</animated-arrow-button> -->
</div>
</div>
@@ -219,7 +219,7 @@
<h4>Software management</h4>
<h2>Manage software consistently</h2>
<div purpose="button-row" class="d-flex justify-content-center align-items-center mx-auto">
<a class="btn btn-primary" purpose="contact-button" href="/contact">Get a demo</a>
<a class="btn btn-primary mr-0" purpose="contact-button" href="/contact">Get a demo</a>
<!-- <animated-arrow-button href="/try">Try it yourself</animated-arrow-button> -->
</div>
</div>
+1 -1
View File
@@ -234,7 +234,7 @@
<h2 class="mx-auto">Manage devices your way</h2>
</div>
<div purpose="button-row" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
<a purpose="cta-button" href="/contact">Get a demo</a>
<a purpose="cta-button" class="mr-0" href="/contact">Get a demo</a>
<!-- <animated-arrow-button href="/try">Try it yourself</animated-arrow-button> -->
</div>
</div>