How can I reduce the height of the navigation bar in Venture Theme?

[guyv]

Hi All,

Please can someone assist me.

I would like to make the height of the nav bar smaller.

Please see image below:

Thanks in advance!

www.electricrideco.com

[Moeed]

Hey @guyv

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above tag.

[guyv]

@Moeed

Thanks for your reply. Sorry if I wasn’t clear, I would like the height of the whole nav bar to be smaller, not just the “More E-Vehicles” link.

[NomtechSolution]

1. Locate the CSS file for your theme: In the code editor, navigate to the “Assets” folder and look for the CSS file that controls the styles for your theme. It could be named something like theme.css or styles.css. Note that the specific file name may vary depending on your theme.

2. Search for the navigation bar styles: In the CSS file, search for the styles related to the navigation bar. Look for selectors like .navbar, .nav, or similar class names that target the navigation bar.

3. Adjust the height property: Once you’ve found the relevant styles for the navigation bar, locate the height property within those styles. Modify the value of the height property to make the navigation bar smaller. For example, you can try reducing the height to a smaller value like 40px or 50px.

Here’s an example of how the modified CSS

.navbar {
  height: 40px; /* Adjust the height value as desired */
}

[guyv]

@NomtechSolution

Thanks for your reply!

I have added the following code to my theme.scss.liquid file:

.nav-bar {
  height: 50px !important;
}

This is the result:

The nav bar height is smaller but the menu links are no longer centered and when I mouse hover over a link, the blue line is not aligned.

Can you can assist with this?

Thanks!

www.electricrideco.com