Menu in mobile devices

mariadotterud · Member · Nov 14, 2014 at 4:44 pm
Copy link

Add topic to favorites
Hello,

I noticed that the menu bar changes on mobile devices in the Suits Theme, and I’m wondering if there’s any way to have the menu show completely also on smaller screens?

Also, when I go to my blog on my mobile, the post titles are too big, so that if the title is long, it takes up two lines.. Any way to make the titles smaller on smaller screens?

Thank you,
Maria

The blog I need help with is: (visible only to logged in users)
timethief · Member · Nov 14, 2014 at 6:29 pm
Copy link
Suits is a responsive layout theme. Only these themes are responsive layout themes http://theme.wordpress.com/themes/features/responsive-layout/

A responsive layout theme adapts to different screen sizes so that your website will work (and be optimized for) iPhones, iPads, Android and other mobile devices. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

The mobile theme is a completely different theme. When we use a responsive theme we disable the mobile theme Go to > Appearance > Mobile and disable the mobile theme

… wondering if there’s any way to have the menu show completely also on smaller screens?

No there isn’t.
timethief · Member · Nov 14, 2014 at 6:30 pm
Copy link
Yikes! This is a CSS question. Sorry. Please wait for another Volunteer or Staff to answer you.
designsimply · Member · Nov 20, 2014 at 10:21 pm
Copy link
I noticed that the menu bar changes on mobile devices in the Suits Theme, and I’m wondering if there’s any way to have the menu show completely also on smaller screens?

Try adding this to your Appearance > Customize > CSS editor:
```
.menu-toggle {
    display: none;
}
ul.nav-menu,
div.nav-menu > ul {
    display:block;
}
```
designsimply · Member · Nov 20, 2014 at 10:28 pm
Copy link
Any way to make the titles smaller on smaller screens?

Certainly. You can use something called media queries to target by screen size. Here is some background on that:
http://en.support.wordpress.com/custom-design/custom-css-media-queries/

I checked your current custom CSS, and I see that you already have changed the post titles to be centered and lowercase using this:
```
.entry-title {
    text-align: center;
    text-transform: lowercase
}
```
To make the font size for posts smaller just on small screens, you can use the following CSS:
```
@media only screen and (max-width: 868px) {
    .entry-title {
        font-size: 14px !important;
    }
}
```
The @media part is what limits the change to browser widths that are 868px or smaller.

Adjust the 14px number as needed.
mariadotterud · Member · Nov 20, 2014 at 11:04 pm
Copy link
Thank you so much @designsimply. When I changed the CSS with your input the space between the header and the menubar increased, do you know the css to decrease this space?
thesacredpath · Member · Nov 21, 2014 at 3:26 am
Copy link
Hi there, there is a minimum height set for .site-header .home-link. Add the following and adjust the 175px value.
```
.site-header .home-link {
min-height: 175px;
}
```

No items found.