Align section titles to the right of the screen in Zurb Foundation 4

I'm in the process of incorporating sections to develop a navigation system on a basic webpage. However, I require it positioned on the right side of the screen. The default arrangement generated by Foundation with the use of "vertical-tabs" is "tabs on the left, content on the right".

<div class="section-container vertical-tabs" data-section="vertical-tabs">
  <section>
    <p class="title" data-section-title><a href="#">Section title 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#">Section title 2</a></p>
    <div class="content" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

Is there a way for me to reconfigure the layout so that it displays as "tabs on the right, content on the left"?

jqueryzurb-foundation

Answer №1

To override the Foundation CSS, you'll have to utilize a specific selector chain or implement a clever solution in SASS. This method has been successfully tested on my end with Foundation 4.2.1 or a similar recent version.

.section-container.vertical-tabs>section>.title{
left:auto;
right:0;
}
.section-container.vertical-tabs>section>.content{
left:0;
}

Answer №2

For those who are looking to implement the "Tabs" feature, you can use the following code:

    <div class="section-container tabs" data-section="tabs">
  <section class="active">
    <p class="title" data-section-title><a href="#">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#">Section 2</a></p>
    <div class="content" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

To customize and overwrite the Section.js settings, you can add the following CSS:

.section-container > section > .title:nth-child(1){
left:auto!important;
right:86px;
background:#fff;
}
.section-container > section > .content{
left:0;
}
.section-container > section:nth-child(2) >.title{
right:0px!important;
}

.section-container > section.active >.title a{
background:#404040!important;
color:#fff!important
}

I found this solution to be effective for me! Hopefully, it will be helpful to others as well.

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

Check if the page has been loaded using Jquery

Can anyone share a helpful strategy for initiating a function in JavaScript that only begins once the entire page has finished loading? ...

javascriptjquery

Sending data from a server using Node.js, Express, and JQuery through a POST request

As someone new to web development, I'm experimenting with Node.js, Express, and EJS to create a weather application that displays the temperature based on a zipcode. So far, retrieving and showing the temperature has been successful. However, I want t ...

jquerynode.jsajaxexpressejs

The JQUERY code for refreshing a div requires a timeout delay

I'm looking for a way to refresh a specific div on my website that's used for chat. Here's the code I currently have: var refreshId = setInterval(function() { $('#chat_grab').load('chat_grab.php?randval=' + Math.rand ...

javascriptphpjquery

What could be causing the dropdown options to update in the source code upon the Ajax call, but not reflect in the user interface?

My Django dropdown buttons are supposed to be initially empty, but upon calling a script to fetch the drop-down options, I encounter a problem. Although I can see the options populating in the source code, they do not show up in the UI when I click on the ...

jqueryajaxdjangodrop-down-menumaterialize

The JSON request triggers an unsupported media error in the Spring MVC controller

I'm having trouble sending a JSON object to the server. I've tried various solutions from StackOverflow, but none of them seem to work: On the client side: function submitWOZ(){ var sub = { "idNextexercise": parseInt($('#exList') ...

jqueryjsonspringspring-mvc

What is the JQuery code to select a checkbox and display an input field?

I have created a function that retrieves a JSON response, and the data from this response is displayed in the input fields. This is a table. When I click the edit button, it sends a request to the master_get_items file and receives the response. Table sn ...

phpjqueryjson

Determine the overall sum of rows present within this particular tbody section

I am struggling to calculate the total number of tr's within my nested tbody, but I am not getting the correct count. The jQuery code I used is returning a high number like 44 rows instead of the expected 7 rows. Can anyone point out where I might ha ...

javascriptjquerycounthtml-tablerows

The combination of a modal box, checkbox, and cookie feature creates

I am trying to accomplish the following tasks: When the homepage loads, I want a modal box to appear Inside the modal box, there should be a form with a mandatory checkbox After checking the checkbox, submit the form and close the modal box to return to ...

javascriptjquerycookiescheckboxmodal-dialog

The location.reload function keeps reloading repeatedly. It should only reload once when clicked

Is there a way to reload a specific div container without using ajax when the client requests it? I attempted to refresh the page with the following code: $('li.status-item a').click(function() { window.location.href=window.location.href; ...

javascriptjqueryajax

When attempting to redirect to a different page using setTimeout, the loading process appears to continue indefinitely

Currently, I am utilizing the following script: setTimeout(function(){ window.location.href = '/MyPage'; }, 5000); While this script successfully redirects me to /MyPage, it continuously reloads every 5 seconds. Is there a way to r ...

javascripthtmljqueryblogger

`How can I incorporate personalized animations on Google Map V3 Markers as they are individually dropped on the map?`

This is a basic example of dropping markers one by one on Google Maps V3. I have implemented the drop animation when adding markers to the map. However, I am interested in customizing the drop with a fade animation. Is it possible using JavaScript or any ...

javascriptandroidjquerygoogle-mapsgoogle-maps-api-3

Is there a way to programmatically display an edit text field on an HTML page?

Currently, I have a straightforward task which involves pulling data from a MySQL database to display in an HTML table. Here is the current script: <html> <body> <table border='1'> <?php mysql_connect('url',&ap ...

phpjavascriptjquery

A step-by-step guide on incorporating a dynamic data series into a line chart using the powerful tool

The data retrieved from a webservice is processed using the BindTrend method and then converted to a JSON object before being applied to the chart. The code for this process is as follows: var plot; var itemdata = []; var chart; var data = [] ...

c#jqueryhighcharts

Animation glitches occurred following the update to Android Jelly Bean, appearing as duplicated animations on

I am currently working on developing an HTML5 app for Android using JQuery 1.1.0 and Phonegap 1.9.0. The app includes a small animation of a battery being drawn on the canvas and updating dynamically. This animation functioned perfectly on Android 4.0.4. ...

androidjqueryjquery-mobilecordova

Implementing the functionality to allow users to submit and delete comments using AJAX and PHP

I have implemented a php code to display all comments on any post from my MySQL database. Now, I would like to add a submit button to each comment for users to delete it without having to reload the page. I want to achieve this using AJAX but struggling wi ...

ajaxjquery

Concealing div containers and eliminating gaps

Looking for a way to filter div boxes using navigation? Check this out: <ul> <li><a href="javascript:void(0);" data-target="apples">Appels</a></li> <li><a href="javascript:void(0);" data-target="bananas">Ban ...

javascriptjquerycss

I'm having trouble making Jquery's $.get function work

I've been attempting to use the $.get function to retrieve a response from a PHP script, but I'm not having any luck. Nothing seems to be happening. Here is the jQuery code I am using: $(document).ready( function(){ $('#button').c ...

jqueryajax

How to stop event propagation from a draggable element nested within a sortable container in jQuery UI

Here is a link to the code snippet: http://jsfiddle.net/Aa7TW/ {greedy: true} The issue arises with the interaction between droppable and sortable elements. Sortable is triggered when an item is dropped directly onto it, while dropping an item from the ...

jqueryjquery-uijquery-ui-sortablejquery-ui-draggablejquery-ui-droppable

What is the functionality behind the Image Hover jQuery plugin?

I am relatively new to using jQuery and I would like to incorporate the Image Hover plugin on my website. Specifically, I have a collection of thumbnails representing various projects on my site. What I need help with is implementing a feature where when y ...

jqueryjquery-pluginshoverjquery-hover

Avoid making redundant web service requests using JQuery AJAX

As I incorporate jQuery into my Classic ASP pages, I'm looking for a solution to prevent users from clicking buttons multiple times and making duplicate server queries. Can anyone suggest an efficient method to achieve this? ...

jqueryajaxasp-classic