[Resolved] Mobile Header

[Tom]

To stop the secondary navigation from becoming a mobile toggle, this should help: https://generatepress.com/forums/topic/secondary-navigation-on-mobile-question/#post-120014

Portrait mode on tablet uses the same styles as mobile, as it’s inside the breakpoint (768/767px). The sidebar displays below the content on mobile/portrait mode to make your content more readable/user friendly.

Moving the sidebar up next to the content at this width squish your content and the sidebar – I definitely don’t suggest it.

[Aaron]

I used the function and it worked great, the only issue now is that now is the categories don’t show to the right of the site logo it shows above it like in this pic this is only when viewing in portrait mode it looks fine otherwise..

I see what you’re saying in terms of the tablet view being squished if I was to place the sidebar however what I was thinking of was shrinking the size of the content so it could look just like it would normally look on a desktop however it would just be smaller in order to fit the size of a tablet this seems to only apply to portrait mode, because in landscape everything fits. I would do a entirety different layout for smaller screens because the screen are smaller but for tablet view only in portrait I think it could work.

[Tom]

You would need to float the items:

@media (max-width: 768px) {
    .secondary-navigation .main-nav .sf-menu > li {
        float: right;
        clear: none;
    }
}

However you’re most likely going to run into issues as you’ll run out of space.

As for the sidebar, I guess you could try this:

@media (max-width: 768px) {
    .content-area.mobile-grid-100 {
        float: left;
        width: 85%;
    }
    .sidebar.grid-15 {
        float: left;
        width: 15%;
    }
}

You might need to adjust the media query to suit your needs: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

[Aaron]

So after playing with the css for a lil bit I have gotten the categories to show on the right side in portrait mode, however I want to move the site logo up as well so it could be in the same space as the categories. Spacing may be a issue however if possible I’d like to reduce the size of the logo to accommodate for it.

[Tom]

You should be able to reduce the width of the logo like this:

.site-logo img {
    max-width: 100px; /* adjust as needed */
}

Of course you would add that inside your media query.

[Aaron]

The css works but it doesn’t change where the logo is positioned I have a picture to show what I mean there’s a gap between the site logo and where the categories are

[Tom]

Have you tried reducing the width even more?

[Aaron]

Yes the site logo would get smaller but would remain in the same position

[Tom]

Here’s what I can do in developer tools: http://www.screencast.com/t/9Yv64DhR

[Aaron]

Strange I must have done something wrong with the css what did you use to get that?

[Tom]

I just put that CSS into developer tools to live preview it:

.site-logo img {
    max-width: 300px;
}

If you add that to your CSS inside your media query it should work.

If not, you might have a CSS syntax error above it somewhere.

[Aaron]

I have added the css, I’m guessing there’s a error.. if you don’t mind I’ll let you log on to the site to take a look.

[Tom]

Try adding the CSS above all of the other CSS.

You can also try validating it: https://jigsaw.w3.org/css-validator/#validate_by_input

[Aaron]

So after looking at all the css I added not just the recent ones I got these errors I’m not sure what impact these errors have personally, however this was the result.

I also tried switching the css position from the bottom to the top however it didn’t change anything from a ipad view it actually changed the view when viewing from a desktop as shown here

[Tom]

You may need to change your media query – try just doing a simple one to see if it works:

@media (max-width: 1024px) {
    /* tablet CSS in here */
}

[Author]

Posts