Need help with CSS styling

I'm looking for some help on CSS styling.

First, we’d like to move the three social media icons I’ve got in the navigation menu over to the right next to the search icon. Keep them side-by-side, just right justified with the search icon.

Second, on the homepage, there is a Color Section that includes two rows. The second row only has two 1/3 column elements. I’m struggling to figure out how to center those two columns since they are only 1/3. Want to keep them 1/3 size to match the row just above in the same Color Section.

Third, in the footer, the navigation menu I have down there is shoved a bit over to the right and not centered.

Login details provided in chat.

    Ken Kimbrell

    Hello Steve,

    I see you have some CSS inquiries. Happy to help!

    I am noticing a lot of absolute positioning. This is not ideal for a responsive design. The elements when positioned will stay fixed to the position even when scaling down the viewport width. Absolute positioning would be OK if on a non-responsive site. However I would try to refrain from using the absolute positioning at all, as it will cause you more headaches in the long run. If you need to add positioning, then you will want to use relative positioning. Relative positioning, positions itself within the container it resides in and is responsive to that container. Meaning you can make small adjustments without creating any breaks in your layout. You can learn more about CSS positioning in this fun little guide:

    http://learnlayout.com/position.html

    I was able to accomplish the social menu item alignment, and centering the footer menu. I may need you to elaborate more on the "Color Section."

    You will need to apply the custom CSS to your child-theme's style.css, or you can use the built-in wordpress Additional CSS option in the customizer, by going to your wordrpess dashboard and find Appearance > Customize > Additional CSS when on the front-end customizer.

    You can also use this free plugin called Simple CSS:
    https://wordpress.org/plugins/simple-custom-css/

    The ultimate goal would be to apply the CSS in an area that if you were to update your theme it would not get overwritten. See the code below:

    /***Align social icons to the right***/
    
    #menu-item-44,
    #menu-item-50,
    #menu-item-51,
    #menu-item-search {
        position: relative !important;
    }
    
    #menu-item-44,
    #menu-item-50,
    #menu-item-51 {
        float: right;
        right: 30px;
    }
    
    #menu-item-search {
        clear: both;
        position: relative;
        top: -50px
    }
    
    /***Move footer menu center***/
    
    #socket .sub_menu_socket {
        right: 30px;
    }

    Let me know if this helps!

    Thank you for being the best part of WPMU DEV, and I hope you have a wonderful day

    Ken - WPMU DEV Support

    Steve McGough

    Thank you very much.
    Click here to see my complete style.css file. I am using a child theme.
    I'm totally open to making chances to clean things up. I tried changing the remaining "absolutes" to relative, and even added the !important after them but it screwed everything up in the header and footer. Things seem to work OK now in the header and footer.

    For the footer menu, is there a way to just hide the menu below a specified width? As you can see, I've done that in a couple of places in the header, but those are widgets and I applied a @meda tag to them to hide.

    Ken Kimbrell

    Hello Steve-

    Yes you can do that as well through the use of a CSS media queries. You can learn more about CSS media queries here:
    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    There is one more place I am noticing the use of absolute positioning that is making problems in your layout. This is the element for the copyrights container. It is not positioning correctly to the center based on a couple of variables. One being that you set the position to absolute and another being that you turned the float off. In order to configure the copyright container I will need you to remove a specific set of styles for the copyright container. I have also created a media query that will hide your footer menu based on a viewport width that is before your menu items break. You can find the CSS styles below:

    /** Remove Style **/
    #socket .copyright {
        /* float: none; */
        /* position: absolute; */
        /* text-align: center; */
        /* width: 100%; */
        /* bottom: -20px; */
    }
    /** Replace with **/
    #socket .copyright {
        float: left;
        position: relative;
        top: 20px;
    }
    
    /** Hide footer menu based on a max-width of 1210px **/
    @media only screen and (max-width: 1210px) {
        .avia3-menu {
            display: none !important;
        }
        #socket .copyright {
            top: 15px;
        }
    }

    Let me know if this helps!

    Take Care,

    Ken - WPMU DEV Support