Having trouble adjusting the top menu on my Shopify theme to fit on a single line

Check out this online store:

On the site, you'll notice the menu at the top with options like Home and Chain Saw Safety. Despite my best efforts to adjust the CSS, I can't seem to get it all to fit on one line.

I've played around with the padding, font size, and other settings, but it still won't cooperate. Even though it looks like it should fit on one line or at least one more item, it's just not working.

Am I overlooking a specific tag or property? I've tried adjusting the #main-nav li a element's font size, margins, padding, and more.

Any suggestions would be greatly appreciated. Thank you.

htmlcssshopify

Answer №1

Apply the following CSS code

c6-screen.css --> in the 94th line

#main-nav {
font-size: 12px;
width: 100%;
}

Answer №2

The main navigation menu has been styled with a specified width of 745px in the base.css file on line 131. To make it fit on one line, either remove this width setting or override it with a new style.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When mousing over a subitem of the Image menu, ensure that the Image menu

Is there a way to prevent the image menu from reverting back to its original image when hovering over its subitems? I have 5 navigation menu items, but only one has a dropdown. Whenever I hover on the subitems of About Us, the image for About Us changes ba ...

htmlcssmenu

An obstacle prevents the code injection process in the Chrome extension when a button is pressed

My basic chrome extension is not functioning correctly. More specifically, I am encountering an issue where the alert box does not appear when I click on the button in the popup. Here are the contents of my manifest.json file: {"manifest_version": 2, "n ...

javascripthtmlgoogle-chrome-extension

Using ReactJS to capture keydown events from an iframe

I am trying to implement keydown event handling for an iframe within a ReactJS component. The iframe contains an embedded video, and I want to be able to capture keyboard events while the video is playing. Can someone please assist me with how to achieve ...

javascripthtmlreactjsiframekeydown

Styling the elements that are next to each other using CSS

Hey there, what if I have HTML elements structured like this: <div> <div>Name</div> <div><input type="text" class="check"> <div>Age</div> <div><input type="number" class="check"></div> ...

javascripthtmljquerycss

Utilizing graphics within the Atom text editor

Hey, I have a bit of a silly question. I can't seem to figure out why these images aren't showing up on my Atom editor. Can anyone help me with this? <body> <div class="top-container"> <img src="images/clou ...

htmlcssimageatom-editor

What is the best way to align an Icon in the navbar-toggler of Bootstrap 5?

When working with Angular and Bootstrap to develop a navigation bar, I encountered an issue with aligning a user icon in the navbar. The picture below shows the problem that arises when trying to center align the user icon among other links in the navbar. ...

cssbootstrap-5

Working with PHP and CodeIgniter to highlight active nav-link in Bootstrap for a subdirectory

Just starting out with Bootstrap and running into a little issue. Spent some time on it but can't seem to figure it out. Perhaps it's something simple that I'm overlooking. Essentially, my goal is to keep the nav-link active when navigating ...

phphtmlcsstwitter-bootstrapcodeigniter

Exploring the world of animation with Jquery and images

I'm delving into the world of jQuery to create some captivating animations. Currently, I've been tasked with an assignment involving images that expand, contract, change opacity, and eventually hide. Below is my code snippet: function play_pic1 ...

jqueryhtmlcss

Animated CSS side panel

I'm currently working on creating an animation for a side menu. The animation works perfectly when I open the menu, but the problem arises when I try to animate it back closed. Is there a property that allows the animation to play in reverse when the ...

cssangularcss-animations

Ensure that hyperlinks remain unbroken and do not split over two lines

When I generate links using $_GET [Array] to display in a box, I aim to have 5-10 links per line without any of them appearing on two lines. While I currently use {text-align:justify;} for consistent border spacing, I am seeking a method to prevent the lin ...

phpcss

Retrieve the chosen option within the current page

Currently, I am working with a select button on my webpage: <form method="post"> <label> <select id="label" name="challengeX" style="margin-top:150px;"> <option selected value="0"> Global Statistics </opt ...

phphtmlselect

The top navbar does not stay fixed when the page is scrolled

Having some trouble with my navbar. Here is the code I'm using: <nav id="strumenti" class="navbar navbar-expand-sm navbar-light bg-light sticky"> <a class="navbar-brand" href="#"> <img src="C:\Users\Fabry\De ...

csshtmlbootstrap-4navbar

Integrating information from various sources to create a cohesive online platform

I am looking to incorporate data from various sources into a single web page: Social networks (Facebook, Twitter, LinkedIn, etc.) RSS feeds Article meta tags (particularly OpenGraph and Twitter cards) This data may change dynamically based on user inter ...

javascripthtmlfrontend

Anyone able to solve this mysterious CSS alignment problem?

I have a search bar with two image buttons on a webpage I designed using ASP.NET. When I view the page in Internet Explorer 8, Google Chrome or Opera, I noticed that the textbox and image buttons are not aligned properly. The buttons seem to be positioned ...

asp.nethtmlcss

Ever thought about harnessing the power of SassDoc to create detailed documentation for your sass

After experimenting with sassdoc for documenting our sass mixins and functions, I realized that there doesn't seem to be a straightforward way to generate documentation for our sass variables. Specifically, I am looking for a solution that can output ...

cssnode.jsnpmsassgulp

The image is not properly aligned with the background image

I'm currently working on a page design using bootstrap and css where I want images to fade and reveal the background when hovered over. The challenge I'm facing is that although all images are set to 100px in size, there is white space visible ar ...

htmlcssimagetwitter-bootstrap

Smoothly transition between the new and existing child elements in a React component with a

Currently, I am utilizing a React component that renders a child element through props.children. The content within this child element varies dynamically. I am looking for the most effective method to smoothly transition (fade out the old element and fad ...

javascriptcssreactjs

Establishing properties while creating a fresh instance of a class

I am currently working on developing an invoice application using TypeScript. In my project, I have created an Invoice class with several properties and objects. However, when attempting to set the properties of an item object within the Invoice class usin ...

javascripthtmltypescriptbootstrap-4

Different types of video formats used for html5 video players

Looking for some guidance here. I'm currently in the process of developing a website that allows users to upload their own videos. For the video player, I've opted for the HTML5 player by . My main concern is ensuring that the HTML5 player can on ...

phpjavascripthtml

Working with JavaScript Arrays within a JSON file data

I am currently learning React and attempting to display random images from the Picsum website using their API. The JSON file I receive contains various information, but I am specifically interested in extracting the image URLs. Although it appears that my ...

javascripthtmlreactjsarraysjson