Struggling with a couple css customizations on my blog

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.ads-software.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 ??

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 ?

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?

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