Incorporate hyperlinks to the right side of the footer section

I want to expand the footer by adding 3 more links to the right side of the logo. These new links should float to the right and always be positioned about 100px from the right edge of the web browser.

Check out my JSFiddle for reference:

In my attempt at using CSS, I copied and pasted the existing list but struggled to get the new links to align correctly on the right side.

footer {
  background-color: #30659B;
  height: 135px;
  width: 100%
}

.logo2 {
  width: 150px;
  fill: white;
  display: block;
  position: relative;
  margin: 0 auto;
  padding-top: 27px;
}

.nav2 {
  list-style-type: none;
  overflow: hidden;
  position: absolute;
  display: table;
  text-align: center;
  margin-top: -22px;
  padding: 0;
}

.li2 {
  display: inline-block;
  padding: 0;
  font-family: proxima nova;
  font-size: 10px;
  text-decoration: none;
}

.li2 a {
  display: block;
  text-decoration: none;
  text-align: center;
  color: white;
  /*   margin: 32px 20px 0px 20px; */
  margin-left: 100px;
}
<footer>
  <div class="logo2">
    <svg class="logo2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 50"><title>Artboard 1</title><path d="M46.26,10.5h6.46V35.17H65.55v5.69H46.26Z"/><path d="M82.8,38.59a9.1,9.1,0,0,1-7,2.82c-3.5,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87A14.42,14.42,0,0,1,79,18.33c5,0,9.6,2,9.6,8.33v14.2H82.8Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M109.15,38.08a10.29,10.29,0,0,1-7.74,3.32c-4.82,0-7.1-2.64-7.1-6.92V18.88h5.78V32.21c0,3,1.59,4.05,4.05...

Here's a preview of how the updated footer should look: https://i.sstatic.net/4VSPQ.png

htmlcssfooter

Answer №1

To create the footer layout shown below, you can utilize flexbox styling as outlined in the code snippet provided. Give it a try and let me know if you need further assistance.

footer {
  background-color: #30659B;
  width: 100vw;
}

.logo2 {
  width: 150px;
  fill: white;
  display: block;
}
/* More CSS styling rules here */


<footer>
  <ul class="nav">
    <li class="li2"><a href="/aboutus">ABOUT US</a></li>
    <li class="li2"><a href="/ourwork">OUR WORK</a></li>
    <li class="li2"><a href="/services">SERVICES</a></li>
    <li>
      <div class="logo2">
        <svg class="logo2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 50">
          <title>Artboard 1</title>
          <path d="[SVG PATH DATA HERE]"/>
        </svg>
      </div>
    </li>
    <li class="li3"><a href="/twitter">TWITTER</a></li>
    <li class="li3"><a href="/facebook">FACEBOOK</a></li>
    <li class="li3"><a href="/instagram">INSTAGRAM</a></li>
  </ul>
</footer>

Answer №2

Here is a suggestion for you to try:



  <ul class="nav2">
    <li class="li2"><a href="/aboutus">ABOUT US</a></li>
    <li class="li2"><a href="/ourwork">OUR WORK</a></li>
    <li class="li2"><a href="/services">SERVICES</a></li>
   <li class="li2"><svg class="logo2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg">Your logo here</svg></li>
    <li class="li2"><a href="/aboutus">TWITTER</a></li>
    <li class="li2"><a href="/ourwork">INSTAGRAM</a></li>
    <li class="li2"><a href="/services">FACEBOOK</a></li>
  </ul>

Answer №3

Here is a suggested css class for you to use:

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
}

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

incorrect sequence of div elements appearing vertically

I'm having trouble organizing the header, page title, and navigation bar on my webpage. Despite my attempts to structure them correctly, they are not displaying in the desired order as shown below: https://i.stack.imgur.com/A3rQe.jpg The issue arises ...

htmlcss

What is the best way to add a border around an image along with a button using VueJS?

I am struggling to link a button and an image in VueJS to display a border around the picture. While I can successfully display the border on the button, I am unsure how to extend it to the image as well. Vue.component('my-button', 'my-img& ...

javascripthtmlcssvue.jsvuejs2

Assign multiple EventListeners to an element and remove specific ones individually

I have a specific element, in this case the $(window) in the code example. I want to attach multiple EventListeners to this element, specifically the "scroll" event twice. These two EventListeners have distinct functionalities that I prefer not to combine, ...

javascripthtmljquerybootstrap-4

Execute a jQuery function when the page loads and then trigger it again using buttons

Check out my JSFiddle demonstration here: http://jsfiddle.net/d3fZV/438/ I have a snippet of a slot machine running on a webpage. Currently, it is inactive until the user clicks the button. I am interested in triggering this script on page load or window. ...

javascriptjqueryhtml

Gather information from every user and display their user ID in an HTML table, allowing for updates through a button

Can anyone help me create a table like the one shown here: https://i.sstatic.net/Hj4T9.png The table should fetch data from my firebase database. Here is the structure of my requests database: https://i.sstatic.net/0lJGa.png. I've been trying to mo ...

javascripthtmlfirebasefirebase-realtime-database

Is it possible to apply a margin to <details><summary> elements?

I am struggling with adding a margin to each of the children in my nested <details> elements .container { margin: 20px; } .parent, .child { outline: none; border: none; user-select: none; cursor: pointer; } <div class="container"> ...

htmlcss

Errors in Animation in Bootstrap Carousel Implementation - slides fail to smoothly transition on and off the screen

It appears that when the slideshow transitions to the next slide or image, it loads partway across the screen instead of smoothly displacing the previous slide. I have attempted the following troubleshooting steps: Eliminating any special classes applied ...

jqueryhtmltwitter-bootstrapcarousel

allowing absolutely positioned region to expand

For further information, please visit this page: test page In the process of designing a website, I have implemented a sidebar featuring an accordion style vertical navigation bar. The sidebar is set to be absolutely positioned in relation to its containi ...

jquerycsspositioningcss-position

Steps to make a sub Post or page on WordPress

Seeking to add sub posts within my website's main posts. The URL structure for the main post will be: site.com/post-title I envision sub posts following this format: site.com/post-title/subpost1 site.com/post-title/subpost2 site.com/post-title/ ...

phphtmlwordpress

Steps for creating a one-sided container in CSS

I've created a container class with the following CSS: .container { margin: 0 auto; width: min(90%, 70.5rem); } This setup centers the content on the page within the container, which is great for organization. However, I'm looking to creat ...

htmlcss

Exciting effects activated by hovering on a button

I'm attempting to create an animated effect by having a rectangle expand over the button when hovered by the user. However, I am unsure how to achieve this and have hit a roadblock. Here's what I want: There's a button. There's a rect ...

htmlcssanimationhovertransition

Making a Dialog resizable with jQuery's Resizable Helper

Is there a way to implement the Helper feature from jQuery Resizable, which only shows a frame while resizing the container, in a Dialog? ...

javascriptjquerycssjquery-ui-resizable

Is there a way to use NPM jsdom to determine the number of text lines in an HTML document?

const jsdom = require("jsdom"); const { JSDOM } = jsdom; var htmlContent = "<p>line 1</p><p>another line</p><p>line 3</p><script>//not a line</script><p>last line</p>" let domParser = new JSDOM(ht ...

javascripthtmlnpm

"Discover the versatility of implementing a single ag grid across various components, all while dynamically adjusting its style

I am facing an issue where I have an angular grid ag-grid in component1, which is being used in some other component2. Now, I need to use the same component1 in component3 but with a different class for ag-grid, specifically 'ag-grid-theme-dark'. ...

cssangularag-grid

Using CSS to mask an image may not produce the desired results in the Chrome browser

Example: .mask1 { -webkit-mask-image: url(feather.png); mask-image: url(feather.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } <div class="mask1"> <img src="camp nou.jpg" alt="barcelona" width="600" height="400"> & ...

htmlcss

I'm encountering issues with this code for a dice game. It's strange that whenever I click the roll dice button, it disappears. Additionally, linking an .css sheet seems to cause the entire page to

I'm currently working with two separate codes: one for HTML and the other for JavaScript. I am facing an issue where the button keeps disappearing when I try to add any CSS styling to it. Even a basic CSS file seems to override everything else and lea ...

javascripthtml

Shifting a div element around the webpage and letting it fall into place if it intersects with another div using plain JavaScript

Check out this jsFiddle link. Upon opening it, you will encounter a moveable div. However, I am looking to enhance this functionality by allowing the div to disappear if moved to the 'trash' area. Essentially, when you place the moveable div in t ...

javascripthtmlcss

JavaScript button mouse enter

There seems to be an issue with this code. The button is not functioning properly after hovering over it, even though it was copied from the instructional website where it works fine. <html> <head> <title>Button Magic</t ...

javascripthtmlcss

Creating a unique Bootstrap 4 custom checkbox design without the use of the "for" attribute on the label

Are there alternative methods for maintaining the Bootstrap 4 custom checkbox design without utilizing the input's ID and label's 'for' attribute? The styling for when the box is checked disappears if these are removed. For instance: ...

htmlcssbootstrap-4

What is the best way to toggle DOM classes in React using Material-UI components?

Currently utilizing Material UI alongside React, I have a div element: <div className={classes.div}></div> I am attempting to dynamically add a conditional class to it: <div className={classes.div + divActive ? `${classes.div}__active` : &a ...

javascriptcssreactjsmaterial-ui