Issues with the Foundation Side Navigation

Having some issues with the Side Navigation feature, you can check it out on codePen. In my attempt to create a blue label on the sides (side1, side2, side3, etc) at the same level as the first label (My Site), I tried adding padding-top, padding-bottom, and other adjustments but nothing seems to work. I would greatly appreciate any help in setting up the side navigation properly and ensuring text is centered with minimal space in between.

CSS

.topside-nav li {
  display: inline-block;
  line-height: 15px;
  font-size: 1.25rem; 
  padding-right: 2.25rem;
  margin: -60px 2px 5px 60px;
  text-align: center;
}  

Foundation - Side Nav

It's been quite time-consuming trying to figure this out, so please recommend the best approach. I've already tested Chrome Developer Tools and CodePen without success. It's puzzling why there aren't clear instructions provided on the foundation website.

Answer №1

To adjust the spacing at the top, apply margin-top: 0 to the .top-bar ul class. Additionally, specify a line height of 65px for the .topside-nav li elements.

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 using CSS3 flex, the input box has a specified width but is still overflowing

Can anyone provide some insight into the behavior of this particular jsFiddle? http://jsfiddle.net/zZgmn/1/ I am attempting to set a specific width for an input[type=text] box. However, when the flex-direction is set to row, the input box refuses to adjus ...

Tips for Excluding Content Retrieved Through file_get_contents?

Currently, I am storing the source code of a webpage in a variable called $html using the following line: $html = file_get_contents('http://www.google.com'); When I use <textarea><?php echo htmlentities($html); ?></textarea> ...

Creating an inline css style for a different class within a div - tips and tricks

In my code, I have two separate div blocks. The first div has a class name of divone, while the second div has a class name of divtwo. I am able to write inline styles for the divone block, but now I want to apply inline styles directly to the divtwo block ...

Guide to adding a new font to your Ember project

I am currently in the process of developing a website utilizing the MEEN Stack framework (Mongo, Ember, Express, Node). One challenge I am encountering is importing the Lato font family into my project to serve as the main font for the entire site. Despite ...

Conceal a specific div element using jQuery hide method based on its unique

I'm facing a challenge with this code snippet. I am dynamically generating elements on a webpage from an array: $cars = array("Volvo", "BMW", "Toyota"); foreach($cars as $item) { echo '<div class="column col-3" id="'.$item.'" ...

Ways to incorporate a smooth transition between the opened and closed fab functionality

I am currently utilizing VueJS and Vuetify in my project. I have successfully implemented Vuetify's FAB component, which displays a list of fab buttons as demonstrated in the documentation: <div id="fab-button"> <v-speed-dial v-mo ...

The target="_blank" attribute does not seem to function properly within an iframe

I've been tackling the WordPress media library tab recently. Within this iframe, I included a link with target="_blank". My expectation was for this link to open in a new browser tab or window, but instead, it opens within the iframe tab. Here's ...

Unable to Retrieve Data in Dropdown Using MySQLi Query

Currently, I have a simple data entry form working well. However, someone recently asked me if I could change the 'name' field to a drop-down list of users instead of manually entering names and potentially making spelling mistakes - which actual ...

The CSS3 rotation transform will rotate by an angle of n degrees

I'm currently working on a cube-like element made up of 4 divs that I am rotating using CSS3 transforms (limited to -webkit for a Chrome extension). But there's an issue, if you visit http://jsfiddle.net/CxYTg/ and click through "one", "two", "t ...

The padding on this button seems to be arbitrary and nonsensical

I attempted to create a button with a red border that is positioned at the bottom and center, but the padding seems to be interfering with my design. It appears that with the border, the width extends to 100% which doesn't make sense. I have tried va ...

Utilize jQuery's each function to animate multiple selectors concurrently within a group of elements

I'm trying to enhance my online resume by incorporating some animation. Each job is enclosed in a div accompanied by a corresponding date range div. My goal is for both the job div and the date range div to smoothly transition from 0 to 1 opacity whil ...

The CSS animation in Firefox is limited to running only once

I am in the process of creating a tab system for beginners as an open-source project. Recently, I have come across what seems to be a bug in how Firefox handles CSS animations. Issue with Tab Animations in Firefox For the animation of each tab, I am utili ...

Iframe form submissions

I am interested in accomplishing the following task. My objective is to submit a form to my booking engine and show the results on either a new page or within a Div element. Ideally, when the user clicks the submit button, it would display an Iframe or re ...

Comparison of single-line and multi-line CSS styles placement

There seems to be a debate among CSS developers regarding the preference for multi-line or single-line formatting. Some argue that multi-line is favored for its ease in finding specific properties within the CSS file. However, others believe that single- ...

Stuck autoplay feature when clicking

There is an issue with the play function in the built-in browser audio player. Initially, it starts automatically with the following code... function play(){ var audio = document.getElementById("myaudio"); audio.play(); } However, when modifying the code ...

The issue of height and width always being zero in Chrome when using Classic ASP with JavaScript

Within my markup, I have an image field that I am setting the source for using JavaScript. I am in need of its height and width, so I utilized the image.height() and image.width() methods. Despite working properly in Internet Explorer, these methods do not ...

Spinning a hidden overlay image with CSS

I'm facing a challenge with my mask-image in CSS. I have successfully positioned it using the mask-position property, but I can't seem to figure out how to rotate it without rotating the entire element. Can anyone provide insight on how to achiev ...

While using Tcpdf, I encounter an issue where the textarea value I pass is not being printed in the desired format

Currently, I am experimenting with TCPDF to create PDF files from HTML. However, I have encountered an issue where passing a variable containing text results in the text being printed on separate pages for each line. Is there a way to ensure that the tex ...

Tips for deactivating text input within a textarea

Is there a way to prevent users from typing in the text-area on my chat website? I only want it to display text, not allow input. Any suggestions? ...

Is it possible to determine the height of a div that has been assigned `overflow-y: auto`?

Is it possible to determine the height of a div element with its content without using overflow-y: auto? I would like to keep overflow-y: auto applied but still be able to calculate the height of the div as if the overflow property was not there. Specifi ...