如何在Bedford模板中放置2個橫幅按鈕？

Question

我想要2個按鈕，而不是一個在貝德福德模板的橫幅區域。

這裏的例子：https://michael-park-d5b5.squarespace.com

如果我添加的內容設置2個鏈接 - 它只會讓第二連桿一個butotn，並使得第一鏈接下劃線的鏈接。

如何設置第一個鏈接的類樣式，以便它顯示爲一個按鈕 - 如果我希望按鈕並排而不是堆疊，我是否必須使用自定義css或者我可以編輯某處編輯器中的某些設置？

Answer 1

通過CSS編輯器插入的以下CSS應該在導航中創建倒數第二個鏈接。成爲一個按鈕。基本上，我複製了last-child規則中的現有默認樣式，並將其修改爲nth-last-child(2)。

.nav-button-corner-style-pill.enable-nav-button #headerNav nav > div:nth-last-child(2):not(.folder) a, 
.nav-button-corner-style-pill.enable-nav-button #sidecarNav nav > div:nth-last-child(2):not(.folder) a { 
    -webkit-border-radius: 300px; 
    border-radius: 300px; 
} 
.nav-button-style-outline.enable-nav-button #headerNav nav > div:nth-last-child(2):not(.folder) a, 
.nav-button-style-outline.enable-nav-button #sidecarNav nav > div:nth-last-child(2):not(.folder) a { 
    background-color: transparent; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
    border: 2px solid #fff; 
    color: #fff; 
} 
.enable-nav-button #headerNav nav > div:nth-last-child(2):not(.folder) a, 
.enable-nav-button #sidecarNav nav > div:nth-last-child(2):not(.folder) a { 
    font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-weight: 700; 
    letter-spacing: 1px; 
    font-family: "proxima-nova"; 
    text-transform: uppercase; 
    text-decoration: none; 
    letter-spacing: 2px; 
    font-weight: 600; 
    font-style: normal; 
    margin-left: 1em; 
    padding: 1em 1.5em !important; 
    display: block; 
    background-color: #fff; 
    -moz-osx-font-smoothing: auto; 
    -webkit-font-smoothing: subpixel-antialiased; 
    color: #fff; 
    -webkit-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; 
    -moz-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; 
    -ms-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; 
    -o-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; 
    transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; 
} 

.nav-button-style-outline.enable-nav-button #headerNav nav > div:nth-last-child(2):not(.folder) a:hover, 
.nav-button-style-outline.enable-nav-button #sidecarNav nav > div:nth-last-child(2):not(.folder) a:hover { 
    background-color: #fff; 
    color: #181818; 
} 

.nav-button-corner-style-pill.enable-nav-button #headerNav nav > div:nth-last-child(2):not(.folder) a, 
.nav-button-corner-style-pill.enable-nav-button #sidecarNav nav > div:nth-last-child(2):not(.folder) a { 
    -webkit-border-radius: 300px; 
    border-radius: 300px; 
} 
.nav-button-style-outline.enable-nav-button #headerNav nav > div:nth-last-child(2):not(.folder) a, 
.nav-button-style-outline.enable-nav-button #sidecarNav nav > div:nth-last-child(2):not(.folder) a { 
    background-color: transparent; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
    border: 2px solid #fff; 
    color: #fff; 
} 
.force-mobile-nav.enable-nav-button #sidecarNav nav > div:nth-last-child(2):not(.folder) a { 
    display: inline-block; 
    margin: 1em 0 0 0; 
    line-height: 1; 
    padding: 1em 1.5em; 
} 
.enable-nav-button #sidecarNav nav > div:nth-last-child(2):not(.folder) a { 
    display: inline-block; 
    margin: .75em 0 0 0; 
    line-height: 1; 
    padding: 1em 1.5em; 
} 
.enable-nav-button #headerNav nav > div:nth-last-child(2):not(.folder) a, 
.enable-nav-button #sidecarNav nav > div:nth-last-child(2):not(.folder) a { 
    font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-weight: 700; 
    letter-spacing: 1px; 
    font-family: "proxima-nova"; 
    text-transform: uppercase; 
    text-decoration: none;https://michael-park-d5b5.squarespace.com/?r=35682087#https://michael-park-d5b5.squarespace.com/?r=35682087# 
    letter-spacing: 2px; 
    font-weight: 600; 
    font-style: normal; 
    margin-left: 1em; 
    padding: 1em 1.5em !important; 
    display: block; 
    background-color: #fff; 
    -moz-osx-font-smoothing: auto; 
    -webkit-font-smoothing: subpixel-antialiased; 
    color: #fff; 
    -webkit-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; 
    -moz-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; 
    -ms-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; 
    -o-transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; 
    transition: background-color .1s 0s ease-in-out,color .1s 0s ease-in-out; 
} 

如果你想的按鈕是並排側的移動導航，你可以嘗試這樣的：。

#sidecarNav nav { 
    padding-right: 0.5em; 
    padding-left: 0.5em; 
} 
.enable-nav-button #sidecarNav nav > div:nth-last-child(2):not(.folder), 
.enable-nav-button #sidecarNav nav > div:last-child:not(.folder) { 
    display: inline-block; 
} 

.enable-nav-button #sidecarNav nav > div:nth-last-child(2):not(.folder) a, 
.enable-nav-button #sidecarNav nav > div:last-child:not(.folder) a { 
    font-size: 0.75em; 
    padding: 0.75em 1.2em !important; 
}