Docs

[Headlines34]

Hello I’d like to make a few changes.

I’d like the sub menus to center aligned and font size consistent with the primary menu.
The content in the top bar to be enlarged, centered and italicized.
Is there a way to shrink the spacing for the top bar?
I’d like the top bar to show a link that says ” Resident Login” on the top right. How would I achieve this?

http://77.104.145.248/~theravel/theravello.com/

Thanks,
Chuck

[Headlines34]

This reply has been marked as private.

[Rupok]

Hi Chuck,

Thanks for writing in!

#1. You can add this under Custom > CSS in the Customizer.

.desktop .sub-menu a {
  font-size: 14px;
  text-align: center;
}

#2 & #3. Use this :

.x-topbar p {
  font-size: 16px;
  font-style: italic;
  margin: 8px auto;
  text-align: center;
}

#4. Let’s add another paragraph like the existing one :

<p class="text-right"><a target="_self" href="#">Resident Login</a></p>

Then ad this CSS :

.x-topbar .text-right {
  position: absolute;
  right: 40px;
  top: 5px;
}

Hope this helps.

[Headlines34]

All of that seems to work.

How about responsive background images? They load properly on my desktop, but do not contain on a mobile

[Headlines34]

Also, I’m having trouble getting the top bar content to center align on mobile. Only one portion shows

[Rahul]

Hi There,

Would you mind sending us a screenshot of the issue you are going through?

Thank you for understanding

[Headlines34]

Of course!

Seems like the two top bar links are aligning properly on mobile, but there’s a small grey box in top left corner, partially shown in the screen shot.

The section image isn’t responding though.

Thank you,
Chuck

[Jade]

Hi Chuck,

For the topbar, please add this code in the customizer:

.x-topbar .p-info {
    background-color: #fff;
}

The screenshot about the image not responsive didn’t go through so I am not sure about the issue you mentioned. Kindly try to repost the image.

Hope this helps.

[Headlines34]

Attached.

Thanks

[Headlines34]

Trying again. Attached.

Thanks

[Headlines34]

Again

[Headlines34]

File won’t upload.

Problem: Section background image is not responsive.

Thanks,

[Christopher]

Hi there,

Please add following code one by one in section’s style field and check which one works better.

background-size: 100% 100%;
background-size: contain;
background-size: cover;

If you’re not satisfied with result, please hide this section for mobile devices. Add another section for mobile devices and use proper background image.

Hope it helps.

[Headlines34]

I used an alternattive method, top 20% & bottom 20% padding. Looks good.

Two more questions:
1. center mobile nav button
2. remove grey box from top left in top bar area. only shows on mobile, not desktop

[Christian]

Please add the code below in your Appearance > Customize > Custom > Global CSS

@media (max-width: 979px) {
.masthead-inline .x-btn-navbar {
    display: block;
    float: none;
    margin: 10px auto;
    width: 60px;
    clear: both;
}
.x-topbar {
    border-bottom: 0;
}
}

Hope that helps. 🙂

[Author]

Posts