Top bar text adjustments

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 20 replies, 4 voices, and was last updated 8 years by Kyle – SUPPORT.

Viewing 15 posts - 1 through 15 (of 21 total)

1 2 →

Back to forum

Posted in: Atelier
January 1, 2016 at 10:57 pm #237892

keysilinares
Member

Post count: 165

Hello,

I added some links to the top bar and I want them to be aligned a bit more to the left since I do not want visitors scrolling to the right to see the rest of the text (see attached). How can I go about fixing this?

Thanks

Attachments:
You must be logged in to view attached files.

January 4, 2016 at 7:10 am #238027

Mohammad – SUPPORT
Moderator

Post count: 27441

Hi,
I dont see any topbar links here http://wardrobelane.com/.
Thanks
Mohammad

January 5, 2016 at 9:02 am #238329

keysilinares
Member

Post count: 165

I have my page set in maintenance mode that’s why I attached the photo. Let me know if you want access.

January 5, 2016 at 9:38 am #238339

Kyle – SUPPORT
Moderator

Post count: 35880

Hi

We’ll need to view your page as this only seems to happen o your site

– Kyle

January 13, 2016 at 7:58 am #239935

keysilinares
Member

Post count: 165

This reply has been marked as private.

January 13, 2016 at 9:13 am #239944

Kyle – SUPPORT
Moderator

Post count: 35880

I see you’ve change the layout now

– Kyle

January 13, 2016 at 10:13 am #239959

keysilinares
Member

Post count: 165

I changed it back now. The alignment is no longer an issue now. I’m assuming it’s because I don’t have as many links now. One thing I did notice is that the top bar text does not appear on the mobile site. Well, the left text appears but not the complete right text. The color is different too. I just want the font white for the top bar text.

January 13, 2016 at 10:29 am #239965
Kyle – SUPPORT
Moderator

Post count: 35880
Add this:
```
#mobile-top-text a, #mobile-header a {
  color: #ffffff;
}
```
The sign in/register moves to the slideout menu

– Kyle
January 13, 2016 at 10:37 am #239969
David Martin – Support
Moderator

Post count: 20834
Hi,

Please add this CSS for your top bar tweaks:
```
@media only screen and (max-width: 991px) {
	.mhs-tablet-port .header-wrap, .mhs-tablet-port #top-bar {
	    display: block;
	}
	#top-bar .container .tb-left, #top-bar .container .tb-right {
	    padding-left: 0;
	    text-align: center!important;
	}
}

@media only screen and (max-width: 767px) {
.mhs-tablet-port #mobile-top-text, 
.mhs-tablet-port #mobile-header, 
.mhs-tablet-port #mobile-header-sticky-wrapper {
    display: none;
}
}

@media only screen and (max-width: 991px) {
	.mhs-tablet-port .header-wrap, .mhs-tablet-port #top-bar {
	    display: block;
	}
	#top-bar .container .tb-left, #top-bar .container .tb-right {
	    padding-left: 0;
	    text-align: center!important;
	}
}

@media only screen and (max-width: 767px) {
.mhs-tablet-port #mobile-top-text, 
.mhs-tablet-port #mobile-header, 
.mhs-tablet-port #mobile-header-sticky-wrapper {
    display: none;
}
}

#mobile-top-text a, #mobile-header a {
    color: #fff;
}
```
Thanks.
January 13, 2016 at 10:40 am #239972

keysilinares
Member

Post count: 165

Also, how can I align the top-bar left text to be in the center without aligning the top-bar right text?

Attachments:
You must be logged in to view attached files.

January 13, 2016 at 10:47 am #239976
David Martin – Support
Moderator

Post count: 20834
For both desktop and mobile would be:
```
#top-bar .tb-left {
   text-align: center!important;
}
```
Thanks.
January 13, 2016 at 10:53 am #239982

keysilinares
Member

Post count: 165

Thank you for the above code! But there’s a few things overlapping (see attached)

Attachments:
You must be logged in to view attached files.

January 13, 2016 at 10:57 am #239985

keysilinares
Member

Post count: 165

Even with the center code you provided the text doesn’t fully align to the center. Sorry for the 5 million requests but is there no way to get that text(see attached) aligned right in the center?

Attachments:
You must be logged in to view attached files.

January 13, 2016 at 11:06 am #239991

keysilinares
Member

Post count: 165

I’m seeing double logo and menu (see attached) this is in tablet mode

Attachments:
You must be logged in to view attached files.

January 13, 2016 at 11:06 am #239993

David Martin – Support
Moderator

Post count: 20834

Hi,

1)

If your menu items are getting squashed, please trigger the mobile menu earlier. Theme Options => Mobile Header Options => Mobile Header Visibility => Tablet (Landscape)

2)

That is because the left and right top bar are 50% width each. They are not centered.

To be centered you would need to remove the right bar content and only use the left. Then adjust the left CSS to make it 100% width.

Thanks.
Back to forum

Posted in: Atelier