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

Home Forums Support Replicating header, primary / secondary navigation look on tablet / mobile

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #888329
    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 πŸ™‚

    #888378
    Tom
    Lead Developer
    Lead Developer

    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! πŸ™‚

    #888385
    Alana

    Sent! Please let me know that you got it, thanks πŸ™‚

    #888926
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #893332
    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!

    #893343
    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!

    #893375
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #893431
    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!

    #893503
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #893560
    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!

    #893625
    Leo
    Staff
    Customer Support

    1. Give this a shot instead:

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

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

    #895777
    Tom
    Lead Developer
    Lead Developer
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.