Custom CSS not applying properly?

  • Resolved tthdoc

    (@tthdoc)


    2 years, 9 months ago

    I have a strange issue. My page header has an image on the left, and the navigation menu is on the right. I want the navigation menu to appear next to the image. So I put the following Custom CSS in under Appearance|Customize|Additional CSS:

    .nav-float-right #site-navigation {
	margin-left: 0px !important;
}

    As soon as I put the code in, the menu shifts to the left, as expected. If I open a new tab, it still works as expected.

    But if I open another Chrome window under a different username, or open a new Firefox window, the menu is still on the right. I have tried clearing the cache, closing and restarting Firefox, etc, to no avail.

    Any idea why it is not accepting this change? And while on the subject, can you have 2 menus on the header, for instance:

    IMAGE — Main nav menu left next to image ———–>on right social media icons.

    Thanks,
    Doc

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter tthdoc

    (@tthdoc)

    I found an additional issue with the Custom CSS:

    I wanted to add social icons to the footer and put the following code:

    .social-link-container {
    display: flex;

    }
.social-link-container .social-link {
	padding: 3px;
	margin-right: 10px;
	text-decoration: none;
}
.dashicons {
	
        font-size:30px;
        color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center; 

}

.dashicons-facebook-alt{
        background: #1877F2;
}
.dashicons-twitter{
	background: #1DA1F2;
}

.dashicons-youtube{
	background: #ff0000;
}

.dashicons:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

    On my Chrome page, all is well. But if I go to another Chrome user or Firefox, all I see are three color circles, but the icons, which are white on the working browser, are not there at all. And using inspect, I can modify other factors under .dashicons like width, height, etc, and they change, but the color, which shows white, does not seem to have any effect.

    The common pattern seems to now suggest certain CSS are not being reflected, and others are. But don’t understand how it works fine on chrome browser, but if open a new chrome browser as another user, it is not working correctly.

    Thanks again,
    Doc

    Thread Starter tthdoc

    (@tthdoc)

    Ok, seemed to locate an issue, but not a solution.

    If I open a new user and login to the website, then go to the page, all is working as it should. But if I log out of the wp-admin page, then go back to the website tab and refresh, both the menu issue and the social media issues are there again. So it seems like it is only “seeing” the custom CSS when I am logged into the wp-admin page.

    So I can see the problem, now can someone tell me why this is happening and how to fix it?

    Thanks
    Doc

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom CSS not applying properly?’ is closed to new replies.