Is my code error caused by floating elements to the left, right, and adding a clearfix?

Trying to align the navigation menus image with the social icons has proven to be quite challenging. As a student looking to develop a WordPress theme, I would appreciate some assistance as I am currently stuck. Any help is greatly appreciated, thank you.

Here is the code I have been working on:

HTML - Utilizing WordPress...

<div class="menus">
  <nav id="nav-menus" class="nav-menus">
    <?php $args = array('theme_location' => 'primary'); 
      wp_nav_menu( $args );
    ?>
  </nav>
  <div class="social">
    <ul>
      <li>
        <i class="fa fa-facebook-square fa-2x"></i>
      </li>
      <li>
        <i class="fa fa-twitter-square fa-2x"></i>
      </li>
      <li>
        <i class="fa fa-youtube-square fa-2x"></i>
      </li>
      <li>
        <i class="fa fa-google-plus-square fa-2x"></i>
      </li>
      <li>
        <i class="fa fa-youtube-square fa-2x"></i>
      </li>
    </ul>
  </div>
</div>

CSS

#nav-menus{
    height: 50px;
    width: 100%;
    background-color: #f68e56;
}
.menus > .nav-menus{
    border-radius: 20px;

}
.menus > .nav-menus ul{
    float: left;
}
.menus > .nav-menus ul li{
    font-size: 32px;
    display: inline;
    padding-left: 17px;
    line-height: 50px;
}
.menus > .nav-menus ul li a{
    text-decoration: none;
    color: white;
}
.menus > .nav-menus ul li a:hover{
    color: yellow;
}
.menus > .social ul{
    float: right;
}
.menus > .social ul li{
    display: inline;
}
.menus > .social ul li i{
    padding-left: 10px;
}

Answer №1

Make sure to float the social div and nav elements instead of the ul inside them. Here is a suggested code snippet:

* {margin:0;padding:0}body{padding-top:50px;}
.menus {
  height: 50px;
  width: 100%;
  background-color: #f68e56;
  border-radius: 20px;
}
.menus > .nav-menus {
  float: left;
}
.menus > .nav-menus ul li {
  font-size: 22px;
  display: inline;
  padding-left: 17px;
  line-height: 50px;
}
.menus > .nav-menus ul li a {
  text-decoration: none;
  color: white;
}
.menus > .nav-menus ul li a:hover {
  color: yellow;
}
.menus > .social {
  float: right;
}
.menus > .social ul li {
  display: inline;
  line-height:50px;
}
.menus > .social ul li i {
  padding-left: 10px;
}
<div class="menus">
  <nav id="nav-menus" class="nav-menus">
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
    </ul>
  </nav>
  <div class="social">
    <ul>
      <li>
        <i class="fa fa-facebook-square fa-2x">1</i>
      </li>
      <li>
        <i class="fa fa-twitter-square fa-2x">2</i>
      </li>
      <li>
        <i class="fa fa-youtube-square fa-2x">3</i>
      </li>
      <li>
        <i class="fa fa-google-plus-square fa-2x">4</i>
      </li>
      <li>
        <i class="fa fa-youtube-square fa-2x">5</i>
      </li>
    </ul>
  </div>
</div>

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

ReactStrap: Difficulty concealing navbar item based on screen dimensions

Currently, I am referring to the official documentation to implement a scenario where a NavItem is only displayed for screen sizes greater than sm. As per the guidelines provided in the documentation, I have included the following attributes: https://i ...

Implementing jQuery form validation including checking for the strength of the password

My understanding of jQuery was quite basic until I began working on jQuery form validation with password strength check. I successfully completed the password strength check portion, but now I am unsure of how to enable the submit button once the condition ...

JavaScript: retrieving undefined value from a text element

My goal is to retrieve the text entered into each textbox by querying and looping through their ID tags. However, when I attempt to print what I have retrieved, it always displays "undefined". Seems like your post consists mostly of code: </h ...

Creating a Django template with an HTML button that points to a foreign key reference

I am fairly new to working with Django and I am having trouble understanding how foreign keys work in my specific case. I have gone through numerous tutorials and discussions, but haven't been able to find a clear answer. Let me provide some context: ...

How can one effectively locate a specific element in an HTML document?

Using Beautiful Soup 4, I have successfully written code that scrapes online data from a webpage. My current challenge involves extracting data from a table, specifically targeting the 4th row. Is there a way to pass an argument to the .find() method to sk ...

Is it truly impossible to align text around an image using flexbox?

In typical situations, you can easily float an image left or right to wrap text around it. However, in flexbox layouts, floating elements do not work as expected and finding a solution can be challenging. It is worth noting that Bootstrap 4 will be implem ...

The functionality of Jquery .slideToggle("slow") seems to be glitchy when used as a table expander

I attempted to implement the .slideToggle("slow"); feature to my table, following the instructions detailed here: W3Schools The toggle effect seems to be functioning, but not as expected. I want the effect to behave similar to the example on the W3School ...

Attempting to implement scroll-based animation on my webpage

Having trouble integrating this animation (from codepen) into my website. It works fine on its own, but when I try to add it to my site, it doesn't show up. I want it to appear in the middle at the bottom of the background image. Check out the codepe ...

Integrating content from a separate PHP page into the main index PHP page

I can't seem to get the #container1 div on my index.php page to load with the content from another #container2 div on page1.php. It's frustrating because I've checked my file hierarchy and everything seems correct. This is how my files are ...

Adjust the left and right margins while maintaining the vertical margin spacing

Is there a way to apply horizontal margin while inheriting vertical margin without explicitly setting margin-left and margin-right? I was hoping for something like margin: inherit 20px; to be effective. Take a look at the example here: https://jsfiddle.ne ...

I am having trouble displaying SASS styles in the browser after running webpack with node

In my current project for an online course, I am utilizing sass to style everything. The compilation process completes successfully without any errors, but unfortunately, the browser does not display any of the styles. The styles folder contains five file ...

Using jQuery to create radial-gradients with the background-css feature

I'm a newcomer to this online community and English is not my first language. Despite that, I will do my utmost to clearly explain the issue at hand. Recently, I utilized the .css function in jQuery to create a design element successfully. However, I ...

To enhance the MUI v5 table row, simply apply a border when the mouse hovers

After working on creating a table with Material UI v5, I encountered an issue where I wanted to add a blue border to the table row when the mouse pointer hovered over it. I attempted several methods and did thorough research, but unfortunately, I was unab ...

Utilize JavaScript to implement CSS using an "if" statement

I am currently working on implementing iOS web app properties into my website. My goal is to create a <div> at the top of the page and apply specific CSS styles when a certain condition is met in a JavaScript script. Unfortunately, I am facing issue ...

(adjust) upon selecting a different radiobutton

I have a dilemma with two radio buttons. I am trying to trigger an event when button B is either checked or unchecked. Unfortunately, I am unable to attach any event to button A. <input type="radio" id="A" name="radiogrp" v ...

Uploader and viewer tool for HTML5 documents

My website is currently built using PHP and allows users to add and view documents. The current upload process is basic, requiring users to manually input information and then view the document with minimal formatting on a webpage. I am looking to upgrade ...

Submitting a form using JQuery triggers an error message related to character encoding

While attempting to submit a form using jQuery, I encountered an issue. Firebug displayed a strange error message in German, leading me to believe that there may be a peculiar character in the HTML causing the problem. The character encoding of the plai ...

Utilizing the `theme` property in makeStyles with Material-UI

I am currently working on passing down an muiTheme to a component through the use of ThemeProvider, and I also want to apply it to the children components. Furthermore, I aim to utilize the theme's properties in both components by creating a classes o ...

What is the best way to adjust the size of a toggle button

My HTML page is equipped with a toggle button that has its own CSS properties, but I am facing an issue where the size and length of the toggle button are not aligning with the initial position set. https://i.sstatic.net/HVFY8.png Upon toggling the butto ...

Creating word spacing in CSS paired with a navigation menu using Dreamweaver

As a beginner in Dreamweaver, CSS, and HTML, I may have made some mistakes or overlooked simple solutions. I am currently struggling with how to separate words in my navigation menu, as they always appear centered. Despite trying adjustments like "word-spa ...