Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Secondary navigation items position

Home Forums Support Secondary navigation items position

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #167134
    Fernando Díaz Gascón

    Hello,

    I put the secondary navigation in the web, in order to put the social networks. I choose navigation layout “Fluid/full width”, “float right” navigation position and “right” navigation allignment, and I find some issues:

    – From 1024 px screen width till 768px, the menu items go to left side, instead of the right side configured.
    – From 768px screen width to lower values, the menu items once I press the toggle goes to left side. In this case I would like to get them centered.

    Thanks in advance

    To see this issue, you can see my web in development with user and pass:

    http://econactiva.es.mialias.net/
    user: econac289
    pass: q7lLHdjD

    Thank you!

    #167189
    Tom
    Lead Developer
    Lead Developer

    This should help:

    @media (max-width: 1024px) {
    	.secondary-nav-float-right .secondary-navigation {
    		float: right;
    	}
    }
    
    @media (max-width: 768px) {
    	.secondary-navigation {
    		text-align: center;	
    	}
    	.secondary-navigation .menu > li, 
    	.secondary-navigation .sf-menu > li {
    		display: inline-block !important;
    	}
    }
    #167307
    Fernando Díaz Gascón

    Great! It was useful. Thanks a lot!

    #167391
    Tom
    Lead Developer
    Lead Developer
    #281290
    Fernando Díaz Gascón

    Maybe with some update I have lost one thing in http://econactiva.es/: I see that the secondary navigation items go to left side in mobile and they are not centered as I got with your code. It seems that:

    .secondary-navigation .menu > li, 
    	.secondary-navigation .sf-menu > li {
    		display: inline-block !important;
    	}

    is not working anymore.

    Is it due to an update? How can I center now the items?

    Thanks!

    #281331
    Leo
    Staff
    Customer Support

    Hi there,

    Try replacing with this CSS:

    .toggled.secondary-navigation .menu > li, 
    .toggled.secondary-navigation .sf-menu > li {
        display: inline-block !important;
    }

    Let me know

    #281971
    Fernando Díaz Gascón

    Sorry, it does not work. It is implemented in http://econactiva.es/ and if you see in narrow screens, you can see the social icons in the left side.

    #281997
    Leo
    Staff
    Customer Support

    The social icons look inline on my phone. Try clearing browser cache?

    Let me know.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.