Jump to content

CIRCLE NAVIGATION BAR BUTTONS

Go to solution Solved by HimanshuYadav,

Recommended Posts

Hello! I was trying to make a circular button in my navigation bar. I don't want all the buttons in the nav bar to be circular, just the one related to language. I've been using the following css code, but I can't manage to place the circle just under my button so the text and the circle get aligned.

Here's the code:

.header-nav-item:nth-child(10) {
    background: #000;
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 50% !important;
    margin: 0px;
    position: relative;
    font-size: 10px;
    text-align: center;
    line-height: 1.5;
    font-weight: 700;
}

Here's my web page. Any help with this would be amazing! 

https://hypersphere-puma-c9ga.squarespace.com

password: techdosweb_2024

Captura de pantalla 2024-04-25 111349.png

Link to comment
  • Replies 3
  • Views 443
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

@aquidos Please Use this CSS code!

 

.header-layout-nav-right .header-nav-list {
    justify-content: flex-end;
    align-items: center;
}
.header-nav-item:nth-child(10) {
    background: #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 1.5vw !important;
}
.header-nav-item:nth-child(10) a {
    margin: 0px !important;
}
#header.shrink .header-nav-item:nth-child(10) a {
    color: #fff !important;
}

 

techdos.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.