[Resolved] Replicating header, primary / secondary navigation look on tablet / mobile

[Alana]

Hi,

I wanted to replicate the look and functionality of the desktop view re: my header, primary and secondary navigation. Please let me know how I can go about doing this.

Right now, my main issues when decreasing the screen size are:
1) my header photo w/ logo becomes tiny
2) the primary menu disappears into a side drop down format and the links take up most of the top area of the screen (I would like the primary menu to be responsive and replicate the desktop view)
3) the secondary menu social links also disappear into a drop down format and take up most of the page when they pop us (I would like the secondary menu to be responsive and replicate the desktop view)
4) In the “Get to Know Me” side bar area, the title and button are all the way to the left in the tablet view, but I would like to make them align with the left side of the photo / description.

Thanks so much for your help! I’m really enjoying setting up this theme and would love to get past these hurdles 🙂

[Tom]

Hi there,

It seems your site is behind a coming soon page. Any chance you can send us some login details so we can see it?: https://generatepress.com/contact

Be sure to mention this topic if so.

Thanks! 🙂

[Alana]

Sent! Please let me know that you got it, thanks 🙂

[Tom]

The first thing you want to do is turn off the Mobile Header option.

For the primary and secondary navigations, are you wanting them not to turn into mobile toggles? There likely won’t be enough room on mobile for all the links, so they’ll stack on top of each other. Is that ok?

I’m not sure if it’s possible to align left to the center like that, but we can do this with some CSS:

@media (max-width: 768px) {
    .sidebar .wp-caption.aligncenter {
        display: inline-block;
    }
}

[Alana]

Hey Tom, thanks for the info!

I don’t mind the primary navigation turning into a drop-down (I just need to figure out the formating for it so it looks better, any suggestions are welcome!)

Re: the secondary, I would like the social media buttons to stay the way they are in the desktop view (since there are just 4 of them). How can I do this?

I’m not sure where to input the CSS you suggest? Sorry I’m a newbie with this!

Thanks again for your help!

[Alana]

I put your code into Simple CSS and voila – amazing, thank you!

Still struggling a bit with the navigation formatting (is there a way to control the capitalization?) and removing the drop-down from secondary navigation. Any help would be appreciated!

[Leo]

Do you mean you want to capitalize the menu items?

If so the settings should be in Typography:
https://docs.generatepress.com/article/typography-overview/

And what do you mean by removing the drop-down from the secondary navigation?

Any chance you can disable coming soon page so we can provide more precise help?

Let me know 🙂

[Alana]

Hey Leo,

I’ve disabled the “coming soon” plugin so you should be able to look around.

Here are the issues laid out in clearer fashion:

(1) I would like to remove the all caps font in the drop down options that come down in the primary navigation

(2) I would like to replicate the look of the secondary navigation seen in desktop view on both tablet and mobile views.

Thank you!

[Tom]

1. Give this CSS a shot:

.main-navigation.toggled a {
    text-transform: none;
}

2. This should help: https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

Let me know 🙂

[Alana]

Hey Tom,

1. I tried adding the code you mention to Simple CSS to no avail (still seeing all caps in the drop down options that stem off the primary navigation when I’m in desktop mode)

2. Worked like a charm, thank you!

[Leo]

1. Give this a shot instead:

.main-navigation .main-nav ul ul li a {
    text-transform: none;
}

[Alana]

You’re a legend Leo, thank you! Really appreciate all the help you and Tom have given me :))

[Tom]

Glad we could help! 🙂

[Author]

Posts