Top Menu – remove space for tagline & social icons

I’m really wanting all of these changes as well. I’d like the menu to be more minimalist, so in addition to the above requests, I’d like to remove the drop-shadow around the menu. Can someone please provide some custom CSS to make these changes? Thanks so much!

/* navbar site desc remove but keep it for SEO */
.navbar-wrapper .navbar .site-description { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); }

/* navbar social remove */
.navbar-wrapper .navbar .social-block { display: none; }

/* navbar adjust padding */
.navbar-inner { padding-top: 16px; }
.navbar.resp .navbar-inner { padding-bottom: 4px; }

/* navbar remove gradient color */
.navbar .navbar-inner { background-image: none; }

/* navbar remove dropshadow */
.navbar .navbar-inner { box-shadow: none; }

@paulwpxp Very instructive pieces of code for a CSS newbie. Thank you!

Thanks @paulwpxp for that menu code!:-)

Do you (or anyone else?:) maybe have a code for the menu that makes the menu(texts/categories) emanates from the right side of the page/header??

Also i would like to create some dropdown menues,, do you now where i can find instructions for that?

Incredibly grateful if you/anyone(!) would like to help me with this!

Many thanks!

//Malin

@electricfeet, Thanks! hopefully it’d be useful for someones.

@malinoos, To make dropdown, you only have to set it up correctly. See this guide.
https://codex.www.ads-software.com/WordPress_Menu_User_Guide

And for the “from the right” thing, please open a new ticket for it here.
https://www.ads-software.com/support/theme/customizr

Is your site RTL ? if so *maybe* the RTL stylesheet already does that, to be sure please check with the theme documentation.

@paulwpxp – Thank you so much for the gift of that superhelpful custom CSS, which helped me get my site (https://stephanieand.shalomormsby.com/) right in the zone. You rock!

Many thanks for your help! @paulwpxp

@paulwpxp Thanks very much for the code.

@paulwpxp Many thanks for the CSS tweaks. I just discovered something. I used your first suggested change (to hide the tagline from view but leave it visible to search engines). It worked fine on full screen view (Chrome and Firefox) but when I changed to “restore down” view on my browser, as I reduced the size of the browser window to the size where the menu becomes a pull-down list (icon with lines in it) the tagline re-appeared. It was also happening on my Android phone (older gingerbread model). So I added Dave Bardell’s tweak to remove the tagline on mobile phones and it fixed the problem. Here’s Dave Bardell’s tweak (thanks Dave):
<pre class=”lang:css”>
/* Remove the Tagline on Mobile */
@media (max-width: 978px) {
h2.site-description {
display: none;
}
}

Woops. My PRE didn’t work. Here’s Dave’s tweak without the PRE tag:

/* Remove the Tagline on Mobile */
@media (max-width: 978px) {
h2.site-description {
display: none;
}
}

@dccharron Thanks for the update. I must have missed that, or theme might have been updated, it’s been 3 months.