What steps should I take to eliminate the gap in my fixed bottom navbar?

I'm looking to revamp my menu layout by aligning the links with the social media icons and home button on the same line.

The links are nested inside a div within the main navbar class (streetworn-demos), while the social media icons and homepage button have their own floated divs. I attempted adjusting the width of the navbar class, expecting the links to fall into place, but it only altered their positioning.

How can I achieve having the links and social media icons inline and centered?

@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,700);

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

body {
  background: #333;
  color: #fff;
  font-size: 16px;
  font-family: 'Raleway', Arial, sans-serif;
}

a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  outline: none;
}


/* Link Colours */

.fade {
  background: #333;
}

.fade a {
  color: #fff;
}

a:hover,
a:focus {
  color: #333;
}

.social {
  float: left;

GET request from https://api.openai.com/v1/api/inputs:
Access-Control-Allow-Origin: *
Access-Control-Request-Headers: authorization,content-type
Connection: close
Content-Length: 119
Content-Type: application/json
Date: Fri, 19 Nov 2021 15:33:47 GMT
Server: CloudFront
Vary: Origin
X-Amz-Apigw-Id: D4GO7ELLIAMFS0A=
X-Amzn-Trace-Id: Root=1-619c6b28-3d95dbac11e68cafe81b5108;Sampled=0
X-Cache: Miss from cloudfront


#social {
  padding: 5px;
}
  
  /* Rest of the CSS code */
  
<div class="login">
  <a class="loginlink" href="#">Login / Signup</a>
</div>

<nav class="Streetworn-demos">
  <div class="navbar">
    <a class="brands" href="#">PALACE</a>
    <a class="brands" href="#">GOLFWANG</a>
    <a class="brands" href="#">SUPREME</a>
    <a class="brands" href="#">BILLIONAIRE'S BOYS CLUB</a>
    <a class="brands" href="#">STUSSY</a>
    <a class="brands" href="#">ANTISOCIAL SOCIAL CLUB</a>
  </div>
  <div class="homepage">
    <a class="home" href="index.html"><img id="home" alt="Return to the landing page" src="https://image.ibb.co/fnApE7/home2.png" style="height: 36px; width: 36px" onmouseover="this.src='https://image.ibb.co/bwSEgn/homeicon.png'" onmouseout="this.src='https://image.ibb.co/fnApE7/home2.png'"></a>
  </div>
  <div class="social">
    <a href="http://www.facebook.com/"><img id="social" alt="Follow Streetworn on Facebook!" src="https://image.ibb.co/ftLBSS/fb2.png" style="height: 36px; width: 36px" onmouseover="this.src='https://image.ibb.co/ktUS1n/fbicon.png'" onmouseout="this.src='https://image.ibb.co/ftLBSS/fb2.png'"></a>
    <a href="http://www.instagram.com/"><img id="social" alt="Follow Streetworn on Instagram!" src="https://image.ibb.co/fDPugn/ig2.png" style="height: 36px; width: 36px" onmouseover="this.src='https://image.ibb.co/e5o9E7/igicon.png'" onmouseout="this.src='https://image.ibb.co/fDPugn/ig2.png'"></a>
    <a href="http://www.twitter.com/"><img id="social" alt="Follow Streetworn on Twitter!" src="https://image.ibb.co/cK5Zgn/twitter2.png" style="height: 36px; width: 36px" onmouseover="this.src='https://image.ibb.co/eGbJ7S/twi...
  </div>
</nav>

I would greatly appreciate any assistance!

htmlcss

Answer №1

If floats are used in the design, consider rearranging the order of the homepage and social divs to precede the navbar div. This will ensure that they float out of the way first, allowing the navbar to fill the space between them:

@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,700);
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

body {
  background: #333;
  color: #fff;
  font-size: 16px;
  font-family: 'Raleway', Arial, sans-serif;
}

a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  outline: none;
}


/* Link Colours */

.fade {
  background: #333;
}

.fade a {
  color: #fff;
}

a:hover,
a:focus {
  color: #333;
}

.social {
  float: left;
  clear: none;
}

#social {
  padding: 5px;
}
.
<!-- Rest of the CSS code is unchanged -->
    </div></answer1>
<exanswer1><div class="answer accepted" i="49908953" l="3.0" c="1524074509" a="ajA4Njkx" ai="616443">
<p>When utilizing floats, it's best to reorder the homepage and social divs before the navbar div so they can float out of the way first, allowing the navbar to occupy the space between them:</p>

<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,700);
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

/*Rest of the CSS code remains as is*/

Note: Ensure all IDs are unique

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

How to Implement Button Disable Feature in jQuery When No Checkboxes Are Selected

I need help troubleshooting an issue with a disabled button when selecting checkboxes. The multicheck functionality works fine, but if I select all items and then deselect one of them, the button disables again. Can someone assist me with this problem? Be ...

javascriptjqueryhtml

Tips for creating a mandatory textarea input field

It's pretty straightforward - I have a textarea that is set to required, but it only alerts the user if you actually click inside the text area. If you try to submit without clicking inside, it won't prompt the alert. Take a look at this Fiddle ...

javascriptjqueryhtml

Animation using CSS keyframes for simultaneous manipulation of various properties

I am facing a challenge with animating both the bottom and left properties of an object inside a container div simultaneously. How can I make it move diagonally? Despite using keyframes, the following code does not seem to achieve this effect: #containe ...

csscss-animationscakeyframeanimation

Application utilizing electron technology featuring various tabbed browsing windows connecting to secure websites

Currently, I am in the process of developing my own unique version of a platform similar to using Electron technology. The objective for this app is to provide users with the ability to view multiple URLs simultaneously, such as and , through a tabbed i ...

javascripthtmlnode.jselectron

The click event does not point to the servlet (IDEA, java)

I am facing an issue where the command $.get('MyController1', function (responseText) is not sending to my servlet. I am using ajax and after clicking the button it should send to my servlet ('MyController1' or 'MyController2' ...

javascriptjavajqueryhtmlservlets

Avoiding a line break between two <form> tags is essential for maintaining the structure of your webpage

I am looking for a way to ensure that there are no line breaks between two forms that I have on my website. Here is the code snippet: <form action="..."> <input type="submit" /> </form> LINE BREAK HERE <form action="..."> <inpu ...

htmlcss

Tips for personalizing the css styles of an alert box?

I am in need of customizing the alert box using CSS attributes. Currently, I am able to achieve a similar effect with the code below: JQUERY: $('<div class="alertMessage">Error first</div>') .insertAfter($('#componentName' ...

javascriptjqueryhtmlcss

The Drop-down menu with carousel in Bootstrap is experiencing difficulties displaying its sub-menu items

I am currently facing an issue where the sub-menu items are hidden behind the content in a bootstrap carousel. Despite everything else working fine, this particular problem is causing a headache. JSFiddle: https://jsfiddle.net/Saneesh/pwmyvsw6/65/ Is th ...

jqueryhtmlcsstwitter-bootstrapcarousel

Determine the exact location where the mouse was clicked on a webpage containing an iframe

I am trying to retrieve the mouse position on my HTML page, but I am encountering some issues. Here's what I have so far: document.onclick = function(click) { if (click.clientX<340){ myControl.inputs.selection = false; btnRotate.remove ...

javascripthtml

Tips for deleting a CSS class from a Wicket element

If you're looking to dynamically update a CSS class of a component in Java code, one way to do so is by using an AttributeAppender: component.add(new AttributeAppender("class", true, new Model<String>("foo"), " ")); You can also utilize a util ...

javacsswicket

Using Four Different Colour Borders in CSS

Is it possible to create a CSS border with 4 different colors on one side? Currently, I have the following: #header { border-color:#88a9eb; } I aim to achieve a border featuring four solid colors split equally at 25% each. Can this be done? I am looking ...

htmlcssborder

PHP's Encoding Woes Are Back in Action

I'm encountering encoding challenges on my website, and it's becoming quite frustrating. Allow me to elaborate My meta tag specifies utf8 as the charset. The scripts I'm using also have utf8 defined (<script type="text/javascript src=". ...

phphtmlajaxpostgresqlutf-8

Add a flexible element to a container without disrupting the alignment of the other

I'm facing a challenge in adding an action button to the end of a grid layout without affecting the centering of the items. The button should seamlessly fit into the grid, just slightly offset. If you check out my demo, you'll see what I mean. ...

htmlcssflexbox

The application encountered an exception and has ceased to respond, displaying a custom error page

I have a .NET application running on IIS 7 that is accessed from IE7. When a specific exception occurs, the page is redirected to a plain .htm page with a back button that should take the user back to the previous page. This exception handling is implement ...

javascripthtml.netinternet-exploreriis

Tailored alignment of checkboxes and labels

I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...

csscheckbox

display a loading spinner for number input fields in HTML5

In my HTML5 project, I am currently utilizing a numeric control (input type="number"). The default behavior displays the spinner (up and down arrows) only on hover. Is there a way to make the spinner permanently visible using CSS or another method? ...

csshtml

How can I customize a default button in HTML to hide the selected option from the dropdown menu?

Hey there! I'm currently working on a website that needs to be bilingual, with Spanish as the default language. I want to include a dropdown button that allows users to translate the content into English. Here's what I've tried so far: ...

javascripthtmldrop-down-menuhtml-select

No specified margin at the top of the website's header section

My task was to design the header section of a webpage to resemble this desired webpage look. I started by creating a "header" tag as a container and added a navbar within it. To display the items, I used an unordered list with CSS adjustments for a horizon ...

htmlcsshtml-listsnavbarmargin

Calculating the Sum of Values in PHP using an HTML Form and Jquery

Looking to expand my knowledge of jQuery, I am attempting to create a straightforward page for practice. The goal is to develop a form that will send its values to PHP to be summed and return the results. These results will then be displayed dynamically on ...

phpjqueryhtmlformssum

Troubleshooting the issue with a styled subcomponent in React using Styled Components

Recently, I've delved into React and have been experimenting with creating a Modal component using styled components. My goal is to achieve a similar effect to Framer Motion's motion.div, but utilizing styled components instead. Currently, I hav ...

javascriptcssreactjsnext.jsstyled-components