Add Site Title to Left Mobile Only

[GR8FL]

How can this be done? I am sure there is something I can put in the global CSS.

Thank you.

[scrambler]

You can add the site title to the left using the menu option, and you can hide it on desktop using the CSS below

.is-desktop .site-title-on-menu {display:none;}

[GR8FL]

Is there any way I can make the font size smaller? Like 80%?

I tried this: .site-title-on-menu {font-size:80%;} But it doesn’t seem to work.

Also, I am not displaying the header on mobile (which is why I wanted the site title), but when I go to other pages, there is a gap between the menu bar and the content as if the header isn’t being displayed but is accounting for the space. This is very apparent on pages other than the home page.

Site: https://imc-lewes.org/

 

[scrambler]

You need to add another selector to override the Theme rule

.menu-primary .site-title-on-menu {font-size:80%;}

[GR8FL]

If you prefer, I will open a new thread.

Rather than mess around with the live site, I have moved changes to the staging site: https://test-imc.littledropup.com/

I tried to follow along this tutorial: https://guide.weavertheme.com/menu-mar-advanced-customizations/ for putting the site logo on the menu bar. I adjusted the height and it looks okay on my desktop.

I then hid header image with the idea of using the site logo image instead.

The issues are

1. Need some whitespace below the menu bar and the bottom border which I added in the Menu Bar BG: {border-bottom: 1px solid #816687;}
2. When scrolling down, the site title gets too crammed at the top. It would be great to have more space there as well as the top (see #1 above).
3. A couple of pages have the page title checked to not display and instead am entering what I’d like the title to display surrounded by <h2>My Title</h2>. These pages have much more white space at the top compared to the ones that are displaying the page titles. For example, compare https://test-imc.littledropup.com/teachers/ to https://test-imc.littledropup.com/events/dana/

Thank you.

[scrambler]

1- If you want space above the border, add a bottom padding to your rule

 {border-bottom: 1px solid #816687;padding-bottom:10px;}

2- Remove the 20px top padding on the header. Instead, add margin above the site logo image with the rule below

.menu-primary .custom-logo-on-menu {margin-top:1em;}

3- That is primarily because you use H2 and they include a top margin.

If you are using HTML to enter the text, add

style=”margin-top:0;” 

to the h2 tag

<h2 style="margin-top:0;" class="font-default">What is Dana?</h2>

 

 

[GR8FL]

That worked and thank you!

Is there any way to make the site-title, which in my case is an image, smaller on mobile? .menu-primary .site-title-on-menu {font-size:80%;} has no effect.

Also, can you tell me how I can have less space between the sidebar widgets?

I am back to the live site now: https://imc-lewes.org/

 

[scrambler]

You are not using the site title, but the site logo image, so font size does not apply here.

The size of the image is dictated by its height.

Right now you have is set to 2.2em in the menu option called “Height of logo on menu” and it is quite small.

To have it larger on desktop, but smaller on mobile set the global to 4em for example, then add the CSS rule below for mobile

.is-mobile .menu-primary .custom-logo-on-menu img {height:2.2em;}

If you only want a smaller size on phone, use .is-phone instead of .is-mobile

[GR8FL]

Having internet issues and for some reason what I put in wasn’t saved when I posted my last question.

The menu option is set for 7 em for the height of logo on menu.

What is the difference between .is-mobile and .is-phone?

 

[scrambler]

Device classes are placed on the body tag by the theme depending on the width of the browser

.is-desktop is for desktop (browser width > 768px)

.is tablet is for just tablets (browser width between 581 px – 768px)

.is Phone is just for phones (browser width <581px)

.is-mobile is for Tablets and Phone (browser with < 768px)

 

[GR8FL]

Thank you.  I need to bookmark this.

Final question (I hope).

#nav-primary ul.wvrx-menu {padding-top:2em;} was moving the social icons over the menu bar items and I don’t think I need that. I got that from here: https://guide.weavertheme.com/menu-mar-advanced-customizations/, but I don’t think I need this at all.

[scrambler]

I don’t see that rule in your CSS file right now.

But that rule was to move the menu down so it would be more vertically centered with the image. If you don’t want that then you don’t need it 🙂

[Author]

Posts