Aligning text at bottom of navigation bar

Support
#1

Is it possible to align the navigation links close to the bottom of the navigation bar and add text (for example, a phone number) to the top of the navigation bar?

#2

Hi @eutaw,

Thanks for writing in!

To align the menu at the bottom of the bar please adjust the links alignment.
Go to X-> Theme Option -> Header -> Links-alignment and increase the top value.

Regarding the phone number, there is no option to enter text inside the menu bar. You have to use topbar for that. Which will show the text in to off the menubar.

go to X-> Theme Option -> Header ->MISCELLANEOUS and active the topbar. There you can enter any text.

Hope this helps!

#3

Thank you. I added the phone number and hours to the topbar. I added CSS to have it align to the right but that is not working. I’d like for it to be just to the left of the social icon. Also, how do I get a bullet between the telephone number and hours. I tried the &# code, but it is not being recognized. Your help is appreciated.

#4

Hello @eutaw,

Thanks for updating the thread.

I checked the website and looks like you have removed the changes that you have made. Can you please do it again for us to give you solution and relevant CSS code?

Thanks.

#5

Please take another look. The phone number and hours are on the topbar.

One other thing… I don’t want the height of the navigation bar (white space) to be as large as it is. However, when I change NAVBAR TOP HEIGHT, it causes the links on the navigation bar to go down on top of my image. Please help.

#6

Hi @eutaw,

Thanks for updating the thread!

If I change the top spacing to 100 the navbar looks fine.

Regarding the height of the nav bar which depends on the logo height. Please decrease the logo height to minimize the height of the navbar.

Hope this helps!

#7

Thank you. When I changed the alignment to 100, the links were positioned down on the image. I changed the line spacing for the navigation bar and now it looks fine.

For the topbar, how do I align the text (phone number and hours) to the right, just left of the social icon?

#8

Hi again,

To do that please add the following code in the Theme Options > CSS:

.x-topbar {
    text-align: right !important;
}
.x-topbar .p-info, .x-topbar .x-social-global {
    float: none !important;
    display: inline-block !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#9

Thank you. Looks great!!

#10

You are most welcome. :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.