Struggling with a couple css customizations on my blog

  • Resolved vfranz

    (@vfranz)


    7 years, 8 months ago

    Hello,

    I’ve been struggling with a couple things on my site to customize. I’ve also contacted my theme administrator and he tells me they don’t help with css customization. So that’s why I’m here. I’ve tried everywhere else.

    1. I want to hide the main menu under the header. It’s the dotted border menu under the header which I want to be visible on desktops but hidden on mobile devices.

    2. On the homepage (blog) underneath the excerpt of the blog post there is a “share” option with icons. I need to change the color of these icons from black to a grey (#dddddd).

    3. Also on the homepage the date posted on the blog (above blog title) is black. I need this changed to grey as well.

    If anyone can help you would actually help me so much. This blog is suppose to launch tomorrow!

    website is https://www.littlecitizenslifestyle.com

    • This topic was modified 7 years, 8 months ago by vfranz.
Viewing 5 replies - 1 through 5 (of 5 total)

  • Use code inspector on your browser to view CSS rules. Make changes and copy to Custom CSS panel in WordPress.

    1. There are 2 ways to hide the menu:

    • Using the Theme Customizer
    • Using CSS

    ? USING THE THEME CUSTOMIZER:

    1. Login to your www.remarpro.com Admin Dashboard
    2. Hover on the Appearance menu and click on Customize sub-menu. This open’s up the theme customizer
    3. On the sidebar of the theme customizer you will find Menus option. Click on that.
    4. Click on the Menu-Name. You will now find this text: Delete Menu in red, click on that. This will delete the menu pages and hide it on the page

    ? USING CSS:
    Just add display: none; to the .site-menu class:

    .site-menu {
    position: relative;
    border-top: 2px dotted #ababab;
    border-bottom: 2px dotted #ababab;
    width: 1110px;
    padding: 13px;
    text-align: center;
    display: none;  // add this
}

    ? SHOW DOTTED BORDER ON DESKTOP(under the header) AND HIDE ON MOBILE:

    .site-main:before {
  display: none;   // hide border on mobile
}

@media only screen and (min-width: 769px) {
  .site-main:before {
    display: block;   // show border on desktop
    content: "";
    border: 2px dotted #ababab;
    position: absolute;
    left: 100px;
    right: 100px;
    z-index: 9999;
  }
}

    2. To change the color of the share icons underneath the posts, change the value of the color CSS property of these icons:

    .addthis_toolbox .fa {
    font-size: 15px;
    margin: 0 5px;
    color: #dddddd;  // this is changed from #222 to #dddddd
    -moz-transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

    3. To change the color of the date(above the title), change the value of the color CSS property like this:

    .opulence_section .opulence_border {
    border-top: 3px solid #eee;
    padding: 10px 0 0;
    color: #dddddd;  // this is changed from #000 to #dddddd
    margin: 0 0 10px;
    display: inline-block;
    font: 10px montserrat, serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

    Let me know if this helps ??

    hudsonvalleywebdesign

    (@hudsonvalleywebdesign)

    Well hello there…

    Custom CSS:
    1.
    #main_menu_above_header {
    display: none;
    }

    2.
    .addthis_toolbox .fa {
    color: #dddddd !important;
    }

    3.
    .opulence_section .opulence_border {
    color: #999!important;
    }

    I hope this helps ?

    Thread Starter vfranz

    (@vfranz)

    Thanks for the answers! However I have added the css:

    .site-menu {
    position: relative;
    border-top: 2px dotted #ababab;
    border-bottom: 2px dotted #ababab;
    width: 1110px;
    padding: 13px;
    text-align: center;
    display: none;
    }
    .site-main:before {
    display: none;
    }

    @media only screen and (min-width: 769px) {
    .site-main:before {
    display: block;
    content: “”;
    border: 2px dotted #ababab;
    position: absolute;
    left: 100px;
    right: 100px;
    z-index: 9999;
    }
    }

    And my menu is gone from both the desktop and mobile device. The menu I’m trying to copy is from the companies main site (www.littlecitizens.com) and we need it on desktops only. I’m happy with the mobile main menu I have on mobile device view. Am I missing something? Have I forgotten anything?

    Thread Starter vfranz

    (@vfranz)

    Or if someone could tell me how to make this menu mobile friendly? Either at this point would work.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Struggling with a couple css customizations on my blog’ is closed to new replies.