Navigation bar in the center? - Post...

User 2794900 Photo


Registered User
4 posts

Hello everyone :)

I have been using this tutorial (https://www.youtube.com/watch?v=9J-tJF22rbM) to make a sticky navigation bar. In the tutorial the navigation bar is aligned right. My question is: How do I align a navigation bar to the centre? I only have the opportunity to float it to the left or right?
I asked the CoffeeCup support team and they told me to add the links into a container and center the container by applying auto to the left and right margin. I have tried it but I can't figure out how to make it work.

I hope someone can help me. Thanks in advance!

Regards
Best regards
Christian Trynskov Sorensen
User 187934 Photo


Senior Advisor
20,271 posts

Hi Christian,
Can you share you project file?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 38401 Photo


Senior Advisor
10,951 posts

Make sure that you also apply the "block" style to the "Display" option for the container that you have the nav in. If that's not it then by all means share a link so people can help better. :)
User 2794900 Photo


Registered User
4 posts

Eric Rohloff wrote:
Hi Christian,
Can you share you project file?


Hi Eric,
The project file is attached. I have the navigation bar up top aligned left at the moment. Thank you! :)
Attachments:
Best regards
Christian Trynskov Sorensen
User 2794900 Photo


Registered User
4 posts

Jo wrote:
Make sure that you also apply the "block" style to the "Display" option for the container that you have the nav in. If that's not it then by all means share a link so people can help better. :)


Thanks of your reply! The display option is set to "block", but I still can't seem to make it work. See the project file in my post right above :)
Best regards
Christian Trynskov Sorensen
User 10077 Photo


Senior Advisor
1,096 posts

I'm not at my computer so I can't check your project file right now. However, I had a thought just in case you didn't already know this. Putting links in a container doesn't make the links be centered. Instead, if you have links in a container and the container is centered, then the links appear centered because they are in the container. (I hope that make sense.)

Therefore, when you add a container, as they said, set the left and right margins of the container to auto. Also, by default, the max-width allows it to stretch the full width of the column. Decrease the width of the container to fit the total width the buttons. That should center everything up.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 2794900 Photo


Registered User
4 posts

Brian Durfee wrote:
I'm not at my computer so I can't check your project file right now. However, I had a thought just in case you didn't already know this. Putting links in a container doesn't make the links be centered. Instead, if you have links in a container and the container is centered, then the links appear centered because they are in the container. (I hope that make sense.)

Therefore, when you add a container, as they said, set the left and right margins of the container to auto. Also, by default, the max-width allows it to stretch the full width of the column. Decrease the width of the container to fit the total width the buttons. That should center everything up.


Thank you, Brian.
Decreasing the max-width of the container to fit the total width the buttons totally solved my problem! :D Thank you very much!
Best regards
Christian Trynskov Sorensen

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.