Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Center Navigation Items Without Stacking


dunnard

Question

Site URL: https://tambourine-oarfish-c28h.squarespace.com/

Looking to center the navigation links between the logo and Add to Cart button without the links stacking or the logo shrinking. Currently using the code below to achieve something close to the desired look, but I'm having issues with the nav staying centered on all screen sizes and the logo not shrinking down to nothing on smaller screens.

.header-title-nav-wrapper {
    flex: 1 0 82%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 0 1 auto;
}
.header-layout-nav-center .header-nav-list {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

Desired effect attached. Thank you!

 

https://tambourine-oarfish-c28h.squarespace.com/

password: Bestcannoli2021!

desired-effect.png

Link to comment

10 answers to this question

Recommended Posts

  • 0

Hi. You mean

Left Menu - Middle Logo - Right Menu/Car icon?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
19 hours ago, dunnard said:

Hi @tuanphan, I'm looking for:

Left logo — Middle Navigation — Right Cart Icon

Hi. It looks like you solved this?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@tuanphan At larger screen sizes it looks great! But as the screen gets smaller, the navigation starts aligning to the left and the logo scales down to nothing before it hits the mobile breakpoint (with hamburger nav). Here's what I'm seeing at 1080px:

1284591431_ScreenShot2021-07-21at9_25_40AM.thumb.png.2d7ba37fce0a38b988e0c4958aec2dde.png

Hoping to keep the nav centered all the way to the mobile breakpoint, and prevent the header/logo from shrinking so much until that point as well. Something closer to this:

desired.thumb.png.8de3dec17aba0775b430fe7e5ada72ac.png

 

Link to comment
  • 0

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Yes! @tuanphan would still love help fixing the issues I'm having with the header, and help with any of the additional items you pointed out in your post. But definitely the header: looking to keep the nav centered all the way to the mobile breakpoint, and prevent the header/logo from shrinking so much.

Link to comment
  • 0
18 hours ago, dunnard said:

Yes! @tuanphan would still love help fixing the issues I'm having with the header, and help with any of the additional items you pointed out in your post. But definitely the header: looking to keep the nav centered all the way to the mobile breakpoint, and prevent the header/logo from shrinking so much.

Q5 + 6. Add to Design > Custom CSS

/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* weddings text width */
div#page-section-60da31455d5a6c33996b3e67 .span-5 {
    width: 50%;
}
div#page-section-60da31455d5a6c33996b3e67 .span-2 {
    display: none;
}
/* homepage 3 icons text width */
[data-section-id="60e62bc3b5287639a2220d4c"] .content {
    width: 95% !important;
}
}

Q4. How about removing footer logo on tablet only?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
9 hours ago, tuanphan said:

Q5 + 6. Add to Design > Custom CSS

/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* weddings text width */
div#page-section-60da31455d5a6c33996b3e67 .span-5 {
    width: 50%;
}
div#page-section-60da31455d5a6c33996b3e67 .span-2 {
    display: none;
}
/* homepage 3 icons text width */
[data-section-id="60e62bc3b5287639a2220d4c"] .content {
    width: 95% !important;
}
}

Q4. How about removing footer logo on tablet only?

 

Sure! But really the most pressing update I'm hoping to make is to the header

Link to comment
  • 0
On 8/23/2021 at 12:19 AM, dunnard said:

 

Sure! But really the most pressing update I'm hoping to make is to the header

Add to Design > Custom CSS

/* Tablet footer */
@media screen and (max-width:900px) and (min-width:641px) {
div#page-section-60d0cb13dd814843916dd163>.row>.span-3 {
    display: none;
}
div#page-section-60d0cb13dd814843916dd163 .span-8 {
    width: 100%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/19/2021 at 9:24 AM, dunnard said:

Site URL: https://tambourine-oarfish-c28h.squarespace.com/

Looking to center the navigation links between the logo and Add to Cart button without the links stacking or the logo shrinking. Currently using the code below to achieve something close to the desired look, but I'm having issues with the nav staying centered on all screen sizes and the logo not shrinking down to nothing on smaller screens.

.header-title-nav-wrapper {
    flex: 1 0 82%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 0 1 auto;
}
.header-layout-nav-center .header-nav-list {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

Desired effect attached. Thank you!

 

https://tambourine-oarfish-c28h.squarespace.com/

password: Bestcannoli2021!

desired-effect.png

Wondering if anyone has a solve for this original issue? Greatly appreciated!

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...