- This topic has 9 replies, 3 voices, and was last updated 3 years, 2 months ago by
.
-
Posts
-
Hi there,
I´d like to align two things in the navigation of this site. When the width of the screen gets smalles, the items in the flex box move around naturally.
1) Is there a way to keep the phone icon stick to the phone number and do not break the line?
2) Can I keep the Social Media buttons on the right of the menu instead of breaking the line? It is a hook-element.I played around with the property shrink, basically making the whole navigation shrink would be one way, I guess, but I was not successful with it somehow.
Thanks, Erika
Customer Support
Hi Erika,
You can try adding this through Appearance > Customize > Additional CSS:
@media (min-width: 769px) { nav#site-navigation .inside-navigation.grid-container { display: inline-block; } nav#site-navigation .inside-navigation.grid-container > *:not(button), div#primary-menu ul, div#primary-menu ul li, div#primary-menu ul li a { display: inline; } }However, you would need to make sure that the social icon sizes and padding are identical so that they’re aligned vertically.
Hi Fernando,
it is almost… the social media buttons are not in one line this way…
Would you look?
Erika
Customer Support
Hi there,
that layout is going to be virtually impossible to achieve.
Would it make more sense to create a top bar using a block element to display your Phone Number and Social Icons?
That would allow you menu to flow freely and if need be you can keep the top bar in view on smaller devices when the menu switches to a hamburger.Let me know
Hi David,
…or we use your simple way of thinking, start from scratch and build the whole header, so it kind of reaches that design. As the right and left widgets are 20%, that works and looks better on different sized monitors…
I just do not understand why the social media buttons do not align to the right in the last container, although they are set to the right. Any idea?
Erika
If you select the Buttons wrapper block you can set there horizontal alignment.
Hi David,
it was! Sorry, for some reasons it took time while I could see it in Frontend.
Erika
Looks good to me. Is this ok for you ?
Sure, thanks for looking.
Glad to hear that!
- You must be logged in to reply to this topic.
