How can I make my Venture theme header wider and font size larger?

Technical Q&A

Topic summary

Goal: make the Venture theme header wider (less empty space on desktop) and possibly increase header font size. A reference screenshot was provided.

Context: The storewide width was expanded via custom CSS, but the header did not change.

Key proposals:

  • Desktop-focused CSS: add rules in theme.scss.liquid/theme.css under a min-width: 768px media query to set the header container (.site-header__upper) to width: 100% with a larger max-width (e.g., 1400px) and make the navigation (.site-nav) use flex with space-between alignment. This targets desktop layouts.
  • Mobile-focused CSS: add rules under max-width: 768px to widen the header and adjust sticky bar navigation and notification promo. This primarily affects mobile, not desktop.

Developments/outcomes:

  • The store URL was shared; no password required.
  • No confirmation yet that the desktop CSS fix resolved the issue.
  • A follow-up question notes the header content became wider, but the desktop dropdown navigation did not expand accordingly, asking how to apply the change to the desktop menu.

Open items:

  • How to widen the desktop dropdown navigation specifically.
  • Header font size increase was requested but not addressed by the shared code.

Status: unresolved; discussion ongoing.

Summarized with AI on February 8. AI used: gpt-5.
1

Hello folks. I would like to get my header wider, there is too much empty space on desktop, maybe even get the font a little bigger

123.png
123.png2560×1440 567 KB

With this code I’ve managed to get the rest of the store wider but i do not know that to add to get the header as well.
@media only screen and (min-width: 1080px)
{
#shopify-section-slideshow .hero-wrapper hero .hero-content ,
#shopify-section-161426361656be2654 .page-width ,
#shopify-section-featured-collections .page-width ,
#shopify-section-1614263668f3adee34 .page-width ,
#shopify-section-1614263699afef024d .page-width ,

2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

@ZestardTech www.trendsanta.com , there is no password

4

@ZestardTech Have you managed to find a solution? :slightly_smiling_face:

5

Do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (min-width: 768px){
	.site-nav{
        display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header__upper{
	max-width: 1400px;
	width: 100%;
}
}

Please let me know whether it works.

Kind regards,
Diego

1 Like
6

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 768px)
{
.site-header__upper{max-width: 1400px !important;  width: 100%;}

#StickyBar .site-nav { display: flex !important; justify-content: space-between !important;}

#NotificationPromo .notification__inner .notification__message{
    max-width: 100% !important;
    width: 100% !important;
    letter-spacing: 5px;
}
}
1 Like
7

Can this be done to the desktop drop down menu? this made my header content wider but not the navigation.

Any help would be appreciated.