[Resolved] Outline custom made links on mobile

[Karim]

Hello Tom,

I created a topbar the way you said and it looks awesome. This makes the theme even more powerfull:)

It’s about this site: test.primemedia.nl

I created a couple contactinfo links and float them left and i created some social icons and float them right.
then i used this technique to remove the menubutton on mobile : https://generatepress.com/forums/topic/secondary-navigation-on-mobile-question/page/2/#post-222217

This all looks good on desktop and on bigger tablet screens, but below that it looks like a mess, cause everything stacks up on each other.

Is there some simple css i can use to have the contactinfo outlined horizontally and also the social icons so it all looks nice on mobile too?

Thanks in advance.

[Tom]

Hi there,

You could try something like this:

@media (max-width: 768px) {
    .secondary-navigation .sf-menu > li {
        float: left !important;
        clear: none;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Karim]

Hey Tom,

Thanks for the reply. Strange thing though, everytime i add the css and save, i get this “are you sure you wanna do this” message and i have to click “back”

Am not able to save the changes somehow:(

[Tom]

How are you trying to save the CSS?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Karim]

You are boss! The issue occured by a conflicting plugin with the css editor. After deleting it and adding your CSS it worked perfectly.

Thanks again captain:)

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts