Need to stop horizontal page scroll. Issue with container size and padding.

Report · Jul 29, 2019

UPDATE: Figured out the buttons . Just need help with the horizontal scroll.

Hello,

I have two questions regarding my buttons and the width of the page. The page loads fine with the horizontal layout is looking as it should but there is left padding behind the side menu which enables the page to scroll left to right. How can I adjust this so this doesn't happen. I like the spacing between the blue menu bar and the page content but can't figure out by just changing the padding.

My second question is how I can have each menu item have that solid yellow block when active. I tried this but it's not working:

a:active {

background-size: 4px 50px;

background-color: #ffc627;

color: #003b49;

}

Thank you for any help with this!!

Here is my code. for some reason when I try to add raw html it's not showing up.

<!DOCTYPE html>

<head>

<title>Premier Inc. - Branding Guidelines</title>

<style>

* {

box-sizing: border-box;

}

.logocolumn {

float: left;

width: 250px;

padding: 0 60px 0 0;

}

.clearspacecolumn {

float: left;

width: 450px;

padding: 0 60px 0 0;

}

/* Clearfix (clear floats) */

.logorow::after {

content: "";

clear: both;

display: table;

}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 500px) {

.logocolumn {

width: 60%;

}

.yellow-line {

border-top: 8px solid #ffb819;

width: 65px;

float: left;

}

.roboto {

font-size:3rem;

text-align: left;

font-family: 'Roboto', sans-serif;

font-weight: 300;

}

.robotoslab {

font-size:3rem;

text-align: left;

font-family: 'Roboto Slab', serif;

font-weight: 300;

}

</style>

<style>

ul {

padding: 0;

list-style-type: none;

}

.colorli {

position: relative;

display:inline-block;

width:200px;

height:200px;

list-style:none;

margin:15px 15px 0px 0px;

}

.p1 {

line-height:1.25;

margin: 8px 25px 0px 0px;

text-align:right;

font-family: 'Lato', sans-serif;

font-size:14px;

color: #ffffff;

}

.copyright {

line-height:1.25;

text-align:center;

font-family: 'Lato', sans-serif;

font-size:12px;

color: #ffffff;

}

.span1 {

color: #ffffff;

font-weight: bold;

}

.color-1 { background-color: #003b49; }

.color-2 { background-color: #7a979f; }

.color-3 { background-color: #cad4d7; }

.color-4 { background-color: #f2f4f4; }

.color-5 { background-color: #0091b3; }

.color-6 { background-color: #8dc7d8; }

.color-7 { background-color: #d3e9ef; }

.color-8 { background-color: #ffc627; }

.color-9 { background-color: #ffe29b; }

.color-10 { background-color: #fff3d7; }

.color-11 { background-color: #000000; }

.color-12 { background-color: #e24301; }

.color-13 { background-color: #fea682; }

.white-line {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 25px;

}

.white-line2 {

border-top: 1px solid #ffffff;

width: 80%;

}

.white-line3 {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 20px;

}

.btn2{

border:2px solid;

color:#0091b3;

display:inline-block;

font-family: 'Roboto Slab';

font-weight:400;

font-size:16px;

line-height:40px;

text-align:center;

text-decoration:none;

width:220px;

-webkit-text-size-adjust:none;

mso-hide:all;

margin:25px 0px 25px 0px;

}

a:hover {

text-decoration: none;

}

</style>

<style>

.box-piesite {

text-align: left;

font-size: 22px;

}

.piesite {

position: relative;

width: 1em;

height: 1em;

font-size: 10em;

cursor: default;

}

.piesite .percent {

position: absolute;

top: 1.1em;

left: 0.1em;

width: 100%;

font-size: 0.3em;

text-align: center;

z-index: 2;

line-height: 1.25;

}

.piesite .percent .symbol {

font-size: 0.5em;

vertical-align: super;

opacity: 0.5;

}

.piesite > #slice {

position: absolute;

width: 1em;

height: 1em;

clip: rect(0px, 1em, 1em, 0.5em);

}

.piesite > #slice.gt50 {

clip: rect(auto, auto, auto, auto);

}

.piesite > #slice > .pie {

position: absolute;

border: 0.1em solid #444;

width: 1em;

height: 1em;

clip: rect(0em, 0.5em, 1em, 0em);

border-radius: 0.5em;

}

li.design .piesite > #slice > .pie {

border-color: #0091b3;

}

li.usability .piesite > #slice > .pie {

border-color: #003b49;

}

li.creativity .piesite > #slice > .pie {

border-color: #ffc627;

}

.piesite > #slice > .pie.fill {

-webkit-transform: rotate(180deg) !important;

transform: rotate(180deg) !important;

}

.piesite.fill > .percent {

display: none;

}

.piesite:after {

content: '';

display: block;

position: absolute;

top: 0.1em;

left: 0.1em;

width: 0.8em;

height: 0.8em;

background: #ffffff;

border-radius: 100%;

z-index: 1;

}

.piesite:before {

content: '';

display: block;

position: absolute;

width: 1em;

height: 1em;

border-radius: 0.5em;

opacity: 0.5;

z-index: 0;

}

.piesite:before {

background: #b8b8b8;

}

.box-piesite ul {

padding: 0;

}

.box-piesite ul li {

display: inline-block;

margin: 10px 20px;

}

</style>

<style>

.stretch-across {

height: 19em;

background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/crayons.jpg') center center no-repeat fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

margin-bottom: 2em;

}

.stretch-across2 {

height: 19em;

background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/letters.jpg') center center no-repeat fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

margin-bottom: 2em;

}

.stretch-across3 {

height: 19em;

background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/voice.png') center center no-repeat fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

margin-bottom: 2em;

}

.text-overlay {

color: white;

top: 50%;

transform: translateY(-50%);

margin-left: 105px;

margin-right: auto;

position: relative;

text-align: left;

width: 100%;

}

.parallaxtext {

margin-top: 0;

font-weight: bold;

font-family: 'Roboto Slab', 'Times New Roman', serif;

font-size: 3.5em;

}

</style>

<style>

:root {

--mainColor: #ffc627;

}

a {

background:

linear-gradient(

to bottom, var(--mainColor) 0%,

var(--mainColor) 100%

);

background-position: 0 100%;

background-repeat: repeat-x;

background-size: 4px 0px;

color: #000;

text-decoration: none;

transition: background-size .2s;

}

a:hover {

background-size: 4px 50px;

}

a:active {

background-size: 4px 50px;

background-color: #ffc627;

color: #003b49;

}</style>

</head>

</span>

</a>

</button>

</li>

<a class="nav-link js-scroll-trigger" href="#colors">Color</a>

</li>

<a class="nav-link js-scroll-trigger" href="#typography">Typography</a>

</li>

<a class="nav-link js-scroll-trigger" href="#voice">Voice</a>

</li>

</ul>

</div>

<img class="img-fluid img-profile mx-auto mb-2" width="150" src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_CMYK_Horiz_HiR..." alt=""> <p class="copyright">@ 2019 Premier Inc.</p>

</span>

</nav>

<h1 style="padding-bottom:2rem;" class="mb-0 responsivetitle">Brand

<span class="text-primary">Guidelines</span>

</h1>

<p class="mb-5">Welcome to our hub for partner guidelines and assets. We want to make it easy for you to integrate Premier in your creative assets while respecting our brand and legal/licensing restrictions.</p>

</div>

</section>

<div class="subheading mb-3">Accepted Versions</div>

</div>

</div>

<p class="mb-5">Black</p>

</div>

</div>

<p class="mb-5">White</p>

</div>

</div><div class="subheading mb-3">Clear Space</div>

<p style="margin: 0px;"><b>Clear Space - Print</b></p>

<p class="mb-5">In print materials, the preferred amount of clear

space around the logo is equal to the mobius.</p>

</div>

<p style="margin: 0px;"><b>Clear Space - Digital</b></p>

<p class="mb-5">Maintaining a 8 pixel clear space is preferable.</p>

</div>

<div class="subheading mb-3">Minimum Logo Size</div>

<p style="margin: 0px;"><b>Minimum Logo Size - Print</b></p>

<p class="mb-5">For print use, the logo should never be reduced

below the minimum size of 5.5cm x 1.2cm.</p>

</div>

<p style="margin: 0px;"><b>Minimum Logo Size - Digital</b></p>

<p class="mb-5">The logo should not appear smaller than

107 px wide in digital executions.</p>

</div>

<div><a href="https://www.premierinc.com/external-assets/Branding-Guide/Downloads/PINC_Logos.zip"

class="btn2" id="colors">Download Logo Suite</a></div>

</div>

</section>

<h1 class="text-overlay parallaxtext">Color</h1>

</div>

<div class="subheading mb-3">Primary</div>

<div class="desc"><p class="p1"><span>Night Shift | PMS 309 C</span></p></div>

</li>

<div class="desc"><p class="p1"><span class "span1">Night Shift | 309@50</span></p></div>

</li>

<div class="desc"><p class="p1"><span class "span1" style="color:#000000">Night Shift | 309@20</span></p></div>

</li>

<div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Night Shift | 309@5</span></p></div>

</li>

<div class="desc"><p class="p1"><span class "span1">Scrubs | PMS 632 C</span></p></div>

</li>

<div class="desc"><p class="p1"><span class "span1">Scrubs | 632@50</span></p></div>

</li>

<div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Scrubs | 632@20</span></p></div>

</ul>

<div class="subheading mb-3">Secondary</div>

<div class="desc"><p class="p1"><span class "span1">Early Shift | PMS 123 C</span></p></div>

</li>

<div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@50</span></p></div>

</li>

<div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@20</span></p></div>

</li>

</ul>

<div class="subheading mb-3">Tertiary</div>

<div class="desc"><p class="p1"><span class "span1">BLACK</span></p></div>

<div class="desc"><p class="p1"><span class "span1">RICH BLACK</span></p></div>

</li>

</li>

</li>

</ul>

<div class="subheading mb-3">Color Proportion</div>

</li>

</li>

</li>

</ul>

</div>

</section>

<h1 class="text-overlay parallaxtext">Typography</h1>

</div>

<div class="subheading mb-3">Best Practices</div>

<p style="margin: 0px;"><b>Font Styles</b></p>

<p class="mb-5">Regular or Bold for headlines and subheads. Light or

Regular for body copy. Bold or Italic for emphasis.</p>

<p style="margin: 0px;"><b>Use Cases</b></p>

<p class="mb-5">Please refer to Premier’s Editorial Style Guide for proper usage of

uppercase, lowercase, sentence case, title case and all caps.</p>

<p style="margin: 0px;"><b>Roboto</b> Font Family</p>

<hr>

<div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto"

class="btn2" target="_blank">Download Font Family</a></div>

<p style="margin: 0px;"><b>Roboto Slab</b> Font Family</p>

<hr>

<div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto+Slab"

class="btn2" target="_blank">Download Font Family</a></div>

</div>

</section>

<h1 class="text-overlay parallaxtext">Voice</h1>

</div>

<p>Premier is an innovative team of leaders, thinkers and doers destined to change more than your bottom line. They are out to change the world of

healthcare. We are more than a healthcare GPO, we’re the sixth man on your team, a catalytic innovation machine that is transforming healthcare.</p>

<p class="mb-0">We are smart, but not arrogant. Premier is daring and innovative, achieving results other companies can only dream of. We are constantly

challenging the normal to achieve the exceptional. Premier is not in the technology, pharmacy or GPO industry, we are in the competency

industry. Bringing insight and solutions to problems that seem all but impossible to solve. We have a contagious excitement about the

work we do. Healthcare isn’t frozen yogurt of spandex yoga pants. There is a human-connection to the work we do because people’s lives

are at stake. Our parents, children, neighbors, friends, and people we have yet to meet, depend on a functional healthcare system and we

help make that happen. We are passionate about creating lasting change for our members to help create an unrivaled healthcare system.

Premier isn’t in real estate; we aren’t transactional in nature. Our company is full of gifted team members with a strong helper sense. Problem

solvers. Servant heart. Service-minded. Premier is tenacious, honest, ethical, ambitious, trustworthy, knowledgeable, dedicated, wellrounded,

versatile, curious, imaginative, witty, clever, resilient and compassionate. The stakes are high, and Premier is playing for keeps.</p>

</div>

</section>

</div>

$(document).ready(function() {

var $win = $(window),

$win_height = $(window).height(),

// - A multiple of viewport height - The higher this number the sooner triggered.

windowPercentage = $(window).height() * 0.9;

$win.on("scroll", scrollReveal);

function scrollReveal() {

var scrolled = $win.scrollTop();

///////////////////////////////////////

// Bar Charts scroll activate, looking for .trigger class to fire.

$(".trigger").each(function() {

var $this = $(this),

offsetTop = $this.offset().top;

if (

scrolled + windowPercentage > offsetTop ||

$win_height > offsetTop

) {

$(this).each(function(key, bar) {

var percentage = $(this).data("percentage");

$(this).css("height", percentage + "%");

///////////////////////////////////////

// Animated numbers

$(this).prop("Counter", 0).animate(

{

Counter: $(this).data("percentage")

},

{

duration: 2000,

easing: "swing",

step: function(now) {

$(this).text(Math.ceil(now));

}

);

// Animated numbers

///////////////////////////////////////

});

} else {

///////////////////////////////////////

// To keep them triggered, lose this block.

$(this).each(function(key, bar) {

$(this).css("height", 0);

});

}

});

///////////////////////////////////////

// Horizontal Chart

$(".chartBarsHorizontal .bar").each(function() {

var $this = $(this),

offsetTop = $this.offset().top;

if (

scrolled + windowPercentage > offsetTop ||

$win_height > offsetTop

) {

$(this).each(function(key, bar) {

var percentage = $(this).data("percentage");

$(this).css("width", percentage + "%");

///////////////////////////////////////

// Animated numbers

$(this).prop("Counter", 0).animate(

{

Counter: $(this).data("percentage")

},

{

duration: 2000,

easing: "swing",

step: function(now) {

$(this).text(Math.ceil(now));

}

);

// Animated numbers

///////////////////////////////////////

});

} else {

///////////////////////////////////////

// To keep them triggered, lose this block.

$(this).each(function(key, bar) {

$(this).css("width", 0);

});

}

});

///////////////////////////////////////

// Radial Graphs - scroll activate

$(".piesite").each(function() {

var $this = $(this),

offsetTop = $this.offset().top;

if (

scrolled + windowPercentage > offsetTop ||

$win_height > offsetTop

) {

if (piesiteFired == 0) {

timerSeconds = 3;

timerFinish = new Date().getTime() + timerSeconds * 1000;

$(".piesite").each(function(a) {

pie = $("#pie_" + a).data("pie");

timer = setInterval(

"stoppie(" + a + ", " + pie + ")",

0

);

});

piesiteFired = 1;

}

} else {

// To keep them triggered, lose this block.

$(".piesite").each(function() {

piesiteFired = 0;

});

}

});

}

scrollReveal();

});

///////////////////////////////////////

// The Radial Graphs

///////////////////////////////////////

// The following code is originally from the excellent pen:

// https://codepen.io/StephenScaff/pen/VYaQGB by Stephen Scaff

var timer;

var timerFinish;

var timerSeconds;

function drawTimer(c, a) {

$("#pie_" + c).html(

'<div class="percent"></div><div id="slice"' +

(a > 50 ? ' class="gt50"' : "") +

'><div class="pie"></div>' +

(a > 50 ? '<div class="pie fill"></div>' : "") +

"</div>"

);

var b = 360 / 100 * a;

$("#pie_" + c + " #slice .pie").css({

"-moz-transform": "rotate(" + b + "deg)",

"-webkit-transform": "rotate(" + b + "deg)",

"-o-transform": "rotate(" + b + "deg)",

transform: "rotate(" + b + "deg)"

});

a = Math.floor(a * 100) / 100;

arr = a.toString().split(".");

intPart = arr[0];

$("#pie_" + c + " .percent").html(

'<span class="int">' +

intPart +

"</span>" +

'<span class="symbol">%</span>'

);

}

function stoppie(d, b) {

var c = (timerFinish - new Date().getTime()) / 1000;

var a = 100 - c / timerSeconds * 100;

a = Math.floor(a * 100) / 100;

if (a <= b) {

drawTimer(d, a);

} else {

b = $("#pie_" + d).data("pie");

arr = b.toString().split(".");

$("#pie_" + d + " .percent .int").html(arr[0]);

}

}</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Premier Inc. - Branding Guidelines</title>
    <!-- Bootstrap core CSS -->
    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom fonts for this template -->
    <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/devicons.min.css" rel="stylesheet">
    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/simple-line-icons.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab:300,400" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="https://www.premierinc.com/external-assets/Branding-Guide/css/resume.min.css" rel="stylesheet">
<!-- new css -->
<style>
* {
  box-sizing: border-box;
}
.logocolumn {
  float: left;
  width: 250px;
  padding: 0 60px 0 0;
}
.clearspacecolumn {
  float: left;
  width: 450px;
  padding: 0 60px 0 0;
}
/* Clearfix (clear floats) */
.logorow::after {
  content: "";
  clear: both;
  display: table;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .logocolumn {
    width: 60%;
  }
}
.yellow-line {
border-top: 8px solid #ffb819;
width: 65px;
float: left;
}
.roboto {
font-size:3rem;
text-align: left;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.robotoslab {
font-size:3rem;
text-align: left;
font-family: 'Roboto Slab', serif;
font-weight: 300;
}
</style>
  <!-- color css -->
  <style>
  ul {
  padding: 0;
    list-style-type: none;
  }
.colorli {
  position: relative;
  display:inline-block;    
  width:200px;
  height:200px;  
  list-style:none;  
  margin:15px 15px 0px 0px;
  
    
}
.p1 { 
  line-height:1.25;
  margin: 8px 25px 0px 0px;
text-align:right;
font-family: 'Lato', sans-serif;
font-size:14px;
color: #ffffff;
}
  
  .copyright { 
  line-height:1.25;
text-align:center;
font-family: 'Lato', sans-serif;
font-size:12px;
color: #ffffff;
}
.span1 {
  color: #ffffff;
  font-weight: bold;
  
}
.color-1 { background-color: #003b49; }
.color-2 { background-color: #7a979f; }
.color-3 { background-color: #cad4d7; }
.color-4 { background-color: #f2f4f4; }
.color-5 { background-color: #0091b3; }
.color-6 { background-color: #8dc7d8; }
.color-7 { background-color: #d3e9ef; }
.color-8 { background-color: #ffc627; }
.color-9 { background-color: #ffe29b; }
.color-10 { background-color: #fff3d7; }
.color-11 { background-color: #000000; }
.color-12 { background-color: #e24301; }
.color-13 { background-color: #fea682; }
.white-line {
border-top: 1px solid #ffffff;
width: 80%;
margin-top: 25px;
}
.white-line2 {
border-top: 1px solid #ffffff;
width: 80%;
}
.white-line3 {
border-top: 1px solid #ffffff;
width: 80%;
margin-top: 20px;
}
  .btn2{
  border:2px solid;
color:#0091b3;
display:inline-block;
font-family: 'Roboto Slab';
font-weight:400;
font-size:16px;
line-height:40px;
text-align:center;
text-decoration:none;
width:220px;
-webkit-text-size-adjust:none;
mso-hide:all;
margin:25px 0px 25px 0px;
  }
  a:hover {
 text-decoration: none;
}
</style>
  <!-- circle css -->
  <style>
.box-piesite {
  text-align: left;
  font-size: 22px;
}
.piesite {
  position: relative;
  width: 1em;
  height: 1em;
  font-size: 10em;
  cursor: default;
}
.piesite .percent {
  position: absolute;
  top: 1.1em;
  left: 0.1em;
  width: 100%;
  font-size: 0.3em;
  text-align: center;
  z-index: 2;
line-height: 1.25;
}
.piesite .percent .symbol {
  font-size: 0.5em;
  vertical-align: super;
  opacity: 0.5;
}
.piesite > #slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0px, 1em, 1em, 0.5em);
}
.piesite > #slice.gt50 {
  clip: rect(auto, auto, auto, auto);
}
.piesite > #slice > .pie {
  position: absolute;
  border: 0.1em solid #444;
  width: 1em;
  height: 1em;
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 0.5em;
}
li.design .piesite > #slice > .pie {
  border-color: #0091b3;
}
li.usability .piesite > #slice > .pie {
  border-color: #003b49;
}
li.creativity .piesite > #slice > .pie {
  border-color: #ffc627;
}
.piesite > #slice > .pie.fill {
  -webkit-transform: rotate(180deg) !important;
  transform: rotate(180deg) !important;
}
.piesite.fill > .percent {
  display: none;
}
.piesite:after {
  content: '';
  display: block;
  position: absolute;
  top: 0.1em;
  left: 0.1em;
  width: 0.8em;
  height: 0.8em;
  background: #ffffff;
  border-radius: 100%;
  z-index: 1;
}
.piesite:before {
  content: '';
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  opacity: 0.5;
  z-index: 0;
}
.piesite:before {
  background: #b8b8b8;
}
.box-piesite ul {
  padding: 0;
}
.box-piesite ul li {
  display: inline-block;
  margin: 10px 20px;
}
</style>
  <!-- parallax css -->
  <style>
  .stretch-across {
  height: 19em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/crayons.jpg') center center no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-bottom: 2em;
}
  .stretch-across2 {
  height: 19em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/letters.jpg') center center no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-bottom: 2em;
}
  
  .stretch-across3 {
  height: 19em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/voice.png') center center no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-bottom: 2em;
}
.text-overlay {
  color: white;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 105px;
  margin-right: auto;
  position: relative;
  text-align: left;
  width: 100%;
}
.parallaxtext {
  margin-top: 0;
  font-weight: bold;
  font-family: 'Roboto Slab', 'Times New Roman', serif;
  font-size: 3.5em;
}
</style>
  <!-- hover css -->
   <style>
:root {
  --mainColor: #ffc627;
}
a {
  background:
     linear-gradient(
       to bottom, var(--mainColor) 0%,
       var(--mainColor) 100%
     );
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 4px 0px;
  color: #000;
  text-decoration: none;
  transition: background-size .2s;
}
a:hover {
  background-size: 4px 50px;
}
  a:active { 
  background-size: 4px 50px;
  background-color: #ffc627;
  color: #003b49;
}</style>
  </head>
  <body id="page-top">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
      <a class="navbar-brand js-scroll-trigger" href="#page-top">
       
        <span class="d-none d-lg-block">
          <img class="img-fluid img-profile mx-auto mb-2" width="50" src="https://www.premierinc.com/external-assets/Branding-Guide/images/mobius.png" alt="">
        </span>
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
        
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#logo">Logo</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#colors">Color</a>
          </li>
         
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#typography">Typography</a>
          </li> 
<li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#voice">Voice</a>
          </li>
         
        </ul>
  
      </div>
<span  style="margin-bottom:40px" class="d-none d-lg-block">
          <img class="img-fluid img-profile mx-auto mb-2" width="150" src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_CMYK_Horiz_HiR..." alt=""> <p class="copyright">@ 2019 Premier Inc.</p>
        </span>
    </nav>
    <div class="container-fluid p-0">
      <section style="margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex d-column" id="about">
        <div class="my-auto">
          <h1 style="padding-bottom:2rem;" class="mb-0 responsivetitle">Brand
            <span class="text-primary">Guidelines</span>
          </h1>
         
          <p class="mb-5">Welcome to our hub for partner guidelines and assets. We want to make it easy for you to integrate Premier in your creative assets while respecting our brand and legal/licensing restrictions.</p>
         
        </div>
      </section>
      <section style=" margin-bottom: 90px;margin-left:50px" class="resume-section p-3 p-lg-5 d-flex flex-column" id="logo">
        <div class="my-auto">
<hr class="yellow-line"><br>
          <p><h2 class="mb-5">Logo</h2></p>
          <div class="resume-item d-flex flex-column flex-md-row mb-5">
            <div class="resume-content mr-auto">
              <div class="subheading mb-3">Accepted Versions</div>
              
            </div>
          
          </div>
         <div class="logorow">
  <div class="logocolumn">
    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_309_RGB_Horiz_HiRes...."  style="width:100%;padding-bottom:10px;">
   <p class="mb-5">PMS 309</p>
  </div>
  <div class="logocolumn">
    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_Black_RGB_Horiz_HiRe..."  style="width:100%;padding-bottom:10px;">
   <p class="mb-5">Black</p>
  </div>
  <div class="logocolumn">
    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_Gray_RBG_Horiz_HiRes..."  style="width:100%;padding-bottom:10px;">
   <p class="mb-5">PMS 424</p>
  </div>
<div class="logocolumn">
    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_RGB_Horiz_HiRe..."  style="width:100%;padding-bottom:13px;">
  <p class="mb-5">White</p>
  </div>
</div><div class="subheading mb-3">Clear Space</div>
    <div class="logorow">
  <div class="clearspacecolumn">
    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Clear_Space_Print.png"  style="width:400px;padding-bottom:10px;">
   <p style="margin: 0px;"><b>Clear Space - Print</b></p>
  <p class="mb-5">In print materials, the preferred amount of clear
space around the logo is equal to the mobius.</p>
  </div>
  <div class="clearspacecolumn">
    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Clear_Space_Digital.png"  style="width:360px;padding-bottom:10px;">
   <p style="margin: 0px;"><b>Clear Space - Digital</b></p>
   <p class="mb-5">Maintaining a 8 pixel clear space is preferable.</p>
  </div>
</div>
  <div class="subheading mb-3">Minimum Logo Size</div>
    <div class="logorow">
  <div class="clearspacecolumn">
    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Minimum_Logo_Print.png"  style="width:380px;padding-bottom:10px;">
  <p style="margin: 0px;"><b>Minimum Logo Size - Print</b></p>
   <p class="mb-5">For print use, the logo should never be reduced
below the minimum size of 5.5cm x 1.2cm.</p>
  </div>
  <div class="clearspacecolumn">
    <img src="https://www.premierinc.com/external-assets/Branding-Guide/images/Minimum_Logo_Digital.png"  style="width:340px;padding-bottom:10px;">
  <p style="margin: 0px;"><b>Minimum Logo Size - Digital</b></p>
   <p class="mb-5">The logo should not appear smaller than
107 px wide in digital executions.</p>
  </div>
</div>
  <div><a href="https://www.premierinc.com/external-assets/Branding-Guide/Downloads/PINC_Logos.zip"
class="btn2" id="colors">Download Logo Suite</a></div>
        </div>
      </section>
<div class="stretch-across" style="background-position-y:100%;" id="colors">
  <h1 class="text-overlay parallaxtext">Color</h1>
</div>
      <section style="margin-bottom:90px;margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex flex-column" >
        <div class="my-auto">
<div class="subheading mb-3">Primary</div>
      <ul class="mb-5">
  <li class="color-1 colorli">
    <div style="padding-top: 5px;"><p class="p1"><span>CMYK<br></span>100.64.52.45</p></div>
  <div class="desc"><p class="p1"><span>RGB<br></span>0.59.73</p></div>
  <div class="desc"><p class="p1"><span>HEX<br></span>#003b49</p></div>
  <hr class="white-line">
  <div class="desc"><p class="p1"><span>Night Shift | PMS 309 C</span></p></div>
  
  </li>
  <li class="color-2 colorli">
      <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>#56.31.33.1</p></div>
  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>#122.151.159</p></div>
  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#7a979f</p></div>
  <hr class="white-line">
  <div class="desc"><p class="p1"><span class "span1">Night Shift | 309@50</span></p></div>
  </li>
  <li class="color-3 colorli">
      <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>20.10.12.0</p></div>
  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>202.212.215</p></div>
  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#cad4d7</p></div>
  <hr class="white-line">
  <div class="desc"><p class="p1"><span class "span1" style="color:#000000">Night Shift | 309@20</span></p></div>
  </li>
<li class="color-4 colorli">
      <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>4.2.2.0</p></div>
  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>242.244.244</p></div>
  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#f2f4f4</p></div>
  <hr class="white-line">
  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Night Shift | 309@5</span></p></div>
  </li>
  <li class="color-5 colorli">
       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>92.24.23.0</p></div>
  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>0.145.179</p></div>
  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#0091b3</p></div>
  <hr class="white-line">
  <div class="desc"><p class="p1"><span class "span1">Scrubs | PMS 632 C</span></p></div>
  </li>
  <li class="color-6 colorli">
       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>43.7.12.0</p></div>
  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>#141.199.216</p></div>
  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#8dc7d8</p></div>
  <hr class="white-line">
  <div class="desc"><p class="p1"><span class "span1">Scrubs | 632@50</span></p></div>
  </li>
  <li class="color-7 colorli">
       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">CMYK<br></span>16.2.4.0</p></div>
  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">RGB<br></span>211.233.239</p></div>
  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">HEX<br></span>#d3e9ef</p></div>
  <hr class="white-line">
  <div class="desc"><p class="p1" style="color:#000000"><span class "span1" style="color:#000000">Scrubs | 632@20</span></p></div>
  </ul>
  
<div class="subheading mb-3">Secondary</div>
  <ul class="mb-5">
  <li class="color-8 colorli">
       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.24.91.0</p></div>
  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>255.198.39</p></div>
  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#ffc627</p></div>
  <hr class="white-line">
  <div class="desc"><p class="p1"><span class "span1">Early Shift | PMS 123 C</span></p></div>
  </li>
  <li class="color-9 colorli">
       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>0.12.44.0</p></div>
  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">RGB<br></span>255.226.155</p></div>
  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">HEX<br></span>#ffe29b</p></div>
  <hr class="white-line">
  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@50</span></p></div>
  </li>
  <li class="color-10 colorli">
       <div style="padding-top: 5px;"><p class="p1" style="color:#000000"><span style="color:#000000">CMYK<br></span>0.4.15.0</p></div>
  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">RGB<br></span>255.243.215</p></div>
  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">HEX<br></span>#ff3d7</p></div>
  <hr class="white-line">
  <div class="desc"><p class="p1" style="color:#000000"><span style="color:#000000">Early Shift | 123@20</span></p></div>
  </li>
  </ul>
  <div class="subheading mb-3">Tertiary</div>
  <ul class="mb-5"><li class="color-11 colorli">
       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.0.0.100</p></div>
  <hr class="white-line2">
 <div class="desc"><p class="p1"><span class "span1">BLACK</span></p></div>
  <div class="desc"><p class="p1"><span class "span1">CMYK<br></span>65.30.35.100</p></div>
  <hr class="white-line3">
  <div class="desc"><p class="p1"><span class "span1">RICH BLACK</span></p></div>
  </li>
  <li class="color-12 colorli">
       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>6.87.100.1</p></div>
  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>226.67.1</p></div>
  <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#e24301</p></div>
  <hr class="white-line">
  <div class="desc"><p class="p1"><span class "span1">Code Red | PMS 1665 C</span></p></div>
  </li>
  <li class="color-13 colorli">
       <div style="padding-top: 5px;"><p class="p1"><span class "span1">CMYK<br></span>0.42.47.0</p></div>
  <div class="desc"><p class="p1"><span class "span1">RGB<br></span>254.166.130</p></div>
  <div class   <div class="desc"><p class="p1"><span class "span1">HEX<br></span>#fea682</p></div>
<hr class="white-line">
  <div class   <div class="desc"><p class="p1"><span class "span1">Code Red | 1665@50</span></p></div>
</li>
</ul>
 <div class="subheading mb-3">Color Proportion</div>
 <div class="box-piesite">
    <ul style="font-family: 'Roboto', sans-serif;">
        <li class="design">
            <div class="piesite" id="pie_0" data-pie="60"></div>
        </li>
        <li class="usability">
            <div class="piesite" id="pie_2" data-pie="30"></div>
        </li>
        <li class="creativity">
            <div class="piesite" id="pie_1" data-pie="10"></div>
        </li>
    </ul>
</div>
        </div>
      </section>
<div class="stretch-across2" style="background-position-y:100%;" id="typography">
  <h1 class="text-overlay parallaxtext">Typography</h1>
</div>
      <section style="margin-left:50px;" class="resume-section p-3 p-lg-5 d-flex flex-column">
        <div class="my-auto">
          <div class="subheading mb-3">Best Practices</div>
         <p style="margin: 0px;"><b>Font Styles</b></p>
   <p class="mb-5">Regular or Bold for headlines and subheads. Light or
Regular for body copy. Bold or Italic for emphasis.</p>
  <p style="margin: 0px;"><b>Use Cases</b></p>
   <p class="mb-5">Please refer to Premier’s Editorial Style Guide for proper usage of
uppercase, lowercase, sentence case, title case and all caps.</p>
   <p style="margin: 0px;"><b>Roboto</b> Font Family</p>
   <hr>
         <p class="roboto"> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
  <p class="roboto"> a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
   <p class="roboto"> 1 2 3 4 5 6 7 8 9 0 . - + / * = ? : ; , < > " ! @ #"</p>
  <div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto"
class="btn2" target="_blank">Download Font Family</a></div>
   <p style="margin: 0px;"><b>Roboto Slab</b> Font Family</p>
   
   <hr>
         <p class="robotoslab"> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
  <p class="robotoslab"> a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
   <p class="robotoslab"> 1 2 3 4 5 6 7 8 9 0 . - + / * = ? : ; , < > " ! @ #"</p>
   <div class="mb-5"><a href="https://fonts.google.com/specimen/Roboto+Slab"
class="btn2" target="_blank">Download Font Family</a></div>
        </div>
      </section>
<div class="stretch-across3" style="background-position-y:100%;!important" id="voice">
  <h1 class="text-overlay parallaxtext">Voice</h1>
</div>
<section style="margin-left:50px;min-height:45vh !important" class="resume-section p-3 p-lg-5 d-flex flex-column" id="voice">
        <div class="my-auto">
          <p>Premier is an innovative team of leaders, thinkers and doers destined to change more than your bottom line. They are out to change the world of
healthcare. We are more than a healthcare GPO, we’re the sixth man on your team, a catalytic innovation machine that is transforming healthcare.</p>
          <p class="mb-0">We are smart, but not arrogant. Premier is daring and innovative, achieving results other companies can only dream of. We are constantly
challenging the normal to achieve the exceptional. Premier is not in the technology, pharmacy or GPO industry, we are in the competency
industry. Bringing insight and solutions to problems that seem all but impossible to solve. We have a contagious excitement about the
work we do. Healthcare isn’t frozen yogurt of spandex yoga pants. There is a human-connection to the work we do because people’s lives
are at stake. Our parents, children, neighbors, friends, and people we have yet to meet, depend on a functional healthcare system and we
help make that happen. We are passionate about creating lasting change for our members to help create an unrivaled healthcare system.
Premier isn’t in real estate; we aren’t transactional in nature. Our company is full of gifted team members with a strong helper sense. Problem
solvers. Servant heart. Service-minded. Premier is tenacious, honest, ethical, ambitious, trustworthy, knowledgeable, dedicated, wellrounded,
versatile, curious, imaginative, witty, clever, resilient and compassionate. The stakes are high, and Premier is playing for keeps.</p>
        </div>
      </section>
    
    </div>
    <!-- Bootstrap core JavaScript -->
    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/jquery.min.js"></script>
    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/bootstrap.bundle.min.js"></script>
    <!-- Plugin JavaScript -->
    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/jquery.easing.min.js"></script>
    <!-- Custom scripts for this template -->
    <script src="https://www.premierinc.com/external-assets/Branding-Guide/js/resume.min.js"></script>
<!-- circle js -->
 <script>var piesiteFired = 0;
$(document).ready(function() {
    var $win = $(window),
        $win_height = $(window).height(),
        // - A multiple of viewport height - The higher this number the sooner triggered.
        windowPercentage = $(window).height() * 0.9;
    $win.on("scroll", scrollReveal);
    function scrollReveal() {
        var scrolled = $win.scrollTop();
        
        ///////////////////////////////////////
        // Bar Charts scroll activate, looking for .trigger class to fire.
        $(".trigger").each(function() {
            var $this = $(this),
                offsetTop = $this.offset().top;
            if (
                scrolled + windowPercentage > offsetTop ||
                $win_height > offsetTop
            ) {
                $(this).each(function(key, bar) {
                    var percentage = $(this).data("percentage");
                    $(this).css("height", percentage + "%"); 
                    
                    ///////////////////////////////////////
                    //        Animated numbers
                    $(this).prop("Counter", 0).animate(
                        {
                            Counter: $(this).data("percentage")
                        },
                        {
                            duration: 2000,
                            easing: "swing",
                            step: function(now) {
                                $(this).text(Math.ceil(now));
                            }
                        }
                    );
                    //        Animated numbers
                    ///////////////////////////////////////
                });
            } else {
                ///////////////////////////////////////
                // To keep them triggered, lose this block.
                $(this).each(function(key, bar) {
                    $(this).css("height", 0);
                });
            }    
            
        });
        ///////////////////////////////////////
        // Horizontal Chart
        $(".chartBarsHorizontal .bar").each(function() {
            var $this = $(this),
                offsetTop = $this.offset().top;
            if (
                scrolled + windowPercentage > offsetTop ||
                $win_height > offsetTop
            ) { 
                $(this).each(function(key, bar) {
                    var percentage = $(this).data("percentage");
                    $(this).css("width", percentage + "%");
                    ///////////////////////////////////////
                    //        Animated numbers
                    $(this).prop("Counter", 0).animate(
                        {
                            Counter: $(this).data("percentage")
                        },
                        {
                            duration: 2000,
                            easing: "swing",
                            step: function(now) {
                                $(this).text(Math.ceil(now));
                            }
                        }
                    );
                    //        Animated numbers
                    ///////////////////////////////////////
                });
    
            } else {
                ///////////////////////////////////////
                // To keep them triggered, lose this block.
                $(this).each(function(key, bar) {
                    $(this).css("width", 0);
                });
            }    
            
        });
        
        ///////////////////////////////////////
        // Radial Graphs - scroll activate
        $(".piesite").each(function() {
            var $this = $(this),
                offsetTop = $this.offset().top;
            if (
                scrolled + windowPercentage > offsetTop ||
                $win_height > offsetTop
            ) {
                if (piesiteFired == 0) {
                    timerSeconds = 3;
                    timerFinish = new Date().getTime() + timerSeconds * 1000;
                    $(".piesite").each(function(a) {
                        pie = $("#pie_" + a).data("pie");
                        timer = setInterval(
                            "stoppie(" + a + ", " + pie + ")",
                            0
                        );
                    });
                    piesiteFired = 1;
                }
            } else {
                // To keep them triggered, lose this block.
                $(".piesite").each(function() {
                    piesiteFired = 0;
                });
            }
        });
    }
    scrollReveal();
});
///////////////////////////////////////
//        The Radial Graphs
///////////////////////////////////////
// The following code is originally from the excellent pen:
// https://codepen.io/StephenScaff/pen/VYaQGB by Stephen Scaff
var timer;
var timerFinish;
var timerSeconds;
function drawTimer(c, a) {
    $("#pie_" + c).html(
        '<div class="percent"></div><div id="slice"' +
            (a > 50 ? ' class="gt50"' : "") +
            '><div class="pie"></div>' +
            (a > 50 ? '<div class="pie fill"></div>' : "") +
            "</div>"
    );
    var b = 360 / 100 * a;
    $("#pie_" + c + " #slice .pie").css({
        "-moz-transform": "rotate(" + b + "deg)",
        "-webkit-transform": "rotate(" + b + "deg)",
        "-o-transform": "rotate(" + b + "deg)",
        transform: "rotate(" + b + "deg)"
    });
    a = Math.floor(a * 100) / 100;
    arr = a.toString().split(".");
    intPart = arr[0];
    $("#pie_" + c + " .percent").html(
        '<span class="int">' +
            intPart +
            "</span>" +
            '<span class="symbol">%</span>'
    );
}
function stoppie(d, b) {
    var c = (timerFinish - new Date().getTime()) / 1000;
    var a = 100 - c / timerSeconds * 100;
    a = Math.floor(a * 100) / 100;
    if (a <= b) {
        drawTimer(d, a);
    } else {
        b = $("#pie_" + d).data("pie");
        arr = b.toString().split(".");
        $("#pie_" + d + " .percent .int").html(arr[0]);
    }
}</script>
  </body>
</html>

Report · Jul 29, 2019

You really need to upload your work to a server space you control so we can see it in our browsers. This is too much code to wade through in a forum for a simple layout question.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 29, 2019

My second question is how I can have each menu item have that solid yellow block

css

.nav-link {display:block}

.nav-link:active,

.nav-link:focus {

background-color: #ffc627 !important;

color: #003b49 !important;

}

HTML

<nav>

<ul>

</li>

</li>

</li>

</ul>

</nav>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 29, 2019

Thank you Nancy! Worked great. I kept js-scroll-trigger to keep the smooth scroll and removed active and it worked.

Report · Jul 29, 2019

kineticcreative123 wrote
Hello,
I have two questions regarding my buttons and the width of the page. The page loads fine with the horizontal layout is looking as it should but there is left padding behind the side menu which enables the page to scroll left to right. How can I adjust this so this doesn't happen. I like the spacing between the blue menu bar and the page content but can't figure out by just changing the padding.

I can point you in the right direction.

The horizontal scroll is being caused by these seperator divs in your main content:

<h1 class="text-overlay parallaxtext">Typography</h1>

</div>

You need to revise how you are deploying them.

I would give your main-content <div> (the one which wraps all your sections) a class of 'content-wrapper' and a left margin of 270px so it sits flush to the right of the blue sidebar.

.content-wrapper {

margin-left: 270px;

}

Then set the margin to zero again at 990px;

@media screen and (max-width: 990px) {

.content-wrapper {

margin-left: 0;

}

You just then need to figure out how you want those stretch-across2 <divs> to function without them forcing a horizontal scroll.

Report · Jul 29, 2019

Hey osgood!

Thank you for the reply. I did exactly as above but I'm at a loss for the last step You just then need to figure out how you want those stretch-acroos2 <div> to function without them forcing a horizontal scroll.

You will notice I moved the scroll id so ignore. This is my new html. Sorry for not giving you a live link. I would have to upload to that iON platform that throws all the crazy code in.

I also can't figure out why my buttons are all in the active stat when first loading the page.

<!DOCTYPE html>

<head>

<title>Premier Inc. - Branding Guidelines</title>

<style>

* {

box-sizing: border-box;

}

.logocolumn {

float: left;

width: 250px;

padding: 0 60px 0 0;

}

.clearspacecolumn {

float: left;

width: 450px;

padding: 0 60px 0 0;

}

/* Clearfix (clear floats) */

.logorow::after {

content: "";

clear: both;

display: table;

}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 500px) {

.logocolumn {

width: 60%;

}

.yellow-line {

border-top: 8px solid #ffb819;

width: 65px;

float: left;

}

.roboto {

font-size:3rem;

text-align: left;

font-family: 'Roboto', sans-serif;

font-weight: 300;

}

.robotoslab {

font-size:3rem;

text-align: left;

font-family: 'Roboto Slab', serif;

font-weight: 300;

}

.content-wrapper {

margin-left: 270px;

}

@media screen and (max-width: 990px) {

.content-wrapper {

margin-left: 0;

}

</style>

<style>

ul {

padding: 0;

list-style-type: none;

}

.colorli {

position: relative;

display:inline-block;

width:200px;

height:200px;

list-style:none;

margin:15px 15px 0px 0px;

}

.p1 {

line-height:1.25;

margin: 8px 25px 0px 0px;

text-align:right;

font-family: 'Lato', sans-serif;

font-size:14px;

color: #ffffff;

}

.copyright {

line-height:1.25;

text-align:center;

font-family: 'Lato', sans-serif;

font-size:12px;

color: #ffffff;

}

.span1 {

color: #ffffff;

font-weight: bold;

}

.color-1 { background-color: #003b49; }

.color-2 { background-color: #7a979f; }

.color-3 { background-color: #cad4d7; }

.color-4 { background-color: #f2f4f4; }

.color-5 { background-color: #0091b3; }

.color-6 { background-color: #8dc7d8; }

.color-7 { background-color: #d3e9ef; }

.color-8 { background-color: #ffc627; }

.color-9 { background-color: #ffe29b; }

.color-10 { background-color: #fff3d7; }

.color-11 { background-color: #000000; }

.color-12 { background-color: #e24301; }

.color-13 { background-color: #fea682; }

.white-line {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 25px;

}

.white-line2 {

border-top: 1px solid #ffffff;

width: 80%;

}

.white-line3 {

border-top: 1px solid #ffffff;

width: 80%;

margin-top: 20px;

}

.btn2{

border:2px solid;

color:#0091b3;

display:inline-block;

font-family: 'Roboto Slab';

font-weight:400;

font-size:16px;

line-height:40px;

text-align:center;

text-decoration:none;

width:220px;

-webkit-text-size-adjust:none;

mso-hide:all;

margin:25px 0px 25px 0px;

}

a:hover {

text-decoration: none;

}

</style>

<style>

.box-piesite {

text-align: left;

font-size: 22px;

}

.piesite {

position: relative;

width: 1em;

height: 1em;

font-size: 10em;

cursor: default;

}

.piesite .percent {

position: absolute;

top: 1.1em;

left: 0.1em;

width: 100%;

font-size: 0.3em;

text-align: center;

z-index: 2;

line-height: 1.25;

}

.piesite .percent .symbol {

font-size: 0.5em;

vertical-align: super;

opacity: 0.5;

}

.piesite > #slice {

position: absolute;

width: 1em;

height: 1em;

clip: rect(0px, 1em, 1em, 0.5em);

}

.piesite > #slice.gt50 {

clip: rect(auto, auto, auto, auto);

}

.piesite > #slice > .pie {

position: absolute;

border: 0.1em solid #444;

width: 1em;

height: 1em;

clip: rect(0em, 0.5em, 1em, 0em);

border-radius: 0.5em;

}

li.design .piesite > #slice > .pie {

border-color: #0091b3;

}

li.usability .piesite > #slice > .pie {

border-color: #003b49;

}

li.creativity .piesite > #slice > .pie {

border-color: #ffc627;

}

.piesite > #slice > .pie.fill {

-webkit-transform: rotate(180deg) !important;

transform: rotate(180deg) !important;

}

.piesite.fill > .percent {

display: none;

}

.piesite:after {

content: '';

display: block;

position: absolute;

top: 0.1em;

left: 0.1em;

width: 0.8em;

height: 0.8em;

background: #ffffff;

border-radius: 100%;

z-index: 1;

}

.piesite:before {

content: '';

display: block;

position: absolute;

width: 1em;

height: 1em;

border-radius: 0.5em;

opacity: 0.5;

z-index: 0;

}

.piesite:before {

background: #b8b8b8;

}

.box-piesite ul {

padding: 0;

}

.box-piesite ul li {

display: inline-block;

margin: 10px 20px;

}

</style>

<style>

.stretch-across {

height: 19em;

background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/Crayons.png ') center center no-repeat fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

margin-bottom: 2em;

}

.stretch-across2 {

height: 19em;

background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/Logo@3x-100.jpg') center center no-repeat fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

margin-bottom: 2em;

}

.stretch-across3 {

height: 19em;

background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)), url('https://www.premierinc.com/external-assets/Branding-Guide/images/Voice.png') center center no-repeat fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

margin-bottom: 2em;

}

.text-overlay {

color: white;

top: 50%;

transform: translateY(-50%);

margin-left: 105px;

margin-right: auto;

position: relative;

text-align: left;

width: 100%;

}

.parallaxtext {

margin-top: 0;

font-weight: bold;

font-family: 'Roboto Slab', 'Times New Roman', serif;

font-size: 3.5em;

}

</style>

<style>

:root {

--mainColor: #ffc627;

}

a {

background:

linear-gradient(

to bottom, var(--mainColor) 0%,

var(--mainColor) 100%

);

background-position: 0 100%;

background-repeat: repeat-x;

background-size: 4px 0px;

color: #000;

text-decoration: none;

transition: background-size .2s;

}

a:hover {

background-size: 4px 50px;

}

.active {

background-size: 4px 50px;

background-color: #ffc627;

color: #003b49 !important;

}</style>

</head>

</span>

</button>

</li>

<a class="nav-link js-scroll-trigger active" href="#colors" aria-pressed="true">Color</a>

</li>

<a class="nav-link js-scroll-trigger active" href="#typography" aria-pressed="true">Typography</a>

</li>

<a class="nav-link js-scroll-trigger active" href="#voice" aria-pressed="true">Voice</a>

</li>

</ul>

</div>

<img class="img-fluid img-profile mx-auto mb-2" width="150" src="https://www.premierinc.com/external-assets/Branding-Guide/images/PremierLogo_1c_White_CMYK_Horiz_HiR..." alt=""> <p class="copyright">@ 2019 Premier Inc.</p>

</span>

</nav>

<h1 style="padding-bottom:2rem;" class="mb-0 responsivetitle">Brand

<span class="text-primary">Guidelines</span>

</h1>

<p class="mb-5">Welcome to our hub for partner guidelines and assets. We want to make it easy for you to integrate Premier in your creative assets while respecting our brand and legal/licensing restrictions.</p>

</div>

</section>

</div>

<div class="subheading mb-3">Accepted Versions</div>

</div>

</div>

<p class="mb-5">Black</p>

</div>

</div>

<p class="mb-5">White</p>

</div>

</div><div class="subheading mb-3">Clear Space</div>

<p style="margin: 0px;"><b>Clear Space - Print</b></p>

<p class="mb-5">In print materials, the preferred amount of clear

space around the logo is equal to the mobius.</p>

</div>

<p style="margin: 0px;"><b>Clear Space - Digital</b></p>

<p class="mb-5">Maintaining a 8 pixel clear space is preferable.</p>

</div>

<div class="subheading mb-3">Minimum Logo Size</div>

<p style="margin: 0px;"><b>Minimum Logo Size - Print</b></p>

<p class="mb-5">For print use, the logo should never be reduced

below the minimum size of 5.5cm x 1.2cm.</p>

</div>

<p style="margin: 0px;"><b>Minimum Logo Size - Digital</b></p>

<p class="mb-5">The logo should not appear smaller than

107 px wide in digital executions.</p>

</div>

<div><a href="https://www.premierinc.com/external-assets/Branding-Guide/Downloads/PINC_Logos.zip"

class="btn2">Download Logo Suite</a></div>