Top Bar – Deeper and visible across all devices

[thebeesons]

Hi,

Is there some CSS I can use to adjust the top bar as follows:

– make it deeper
– centre the text
– make it appear across all devices

Thanks in advance

GB

[Mohammad – SUPPORT]

Hi,
Please provide me website url to check. What do you mean to deeper text?
Thanks
Mohammad

[thebeesons]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please go to Admin -> Theme Options -> Header Options -> Top Bar left text config and Top Bar right text config. Do you want more height of topbar?
Thanks
Mohammad

[thebeesons]

Hi Mohammad,

Yes I’d like to:

1 – adjust the height of the top-bar (100px)
2 – centre the text
3 – make the top-bar appear across all devices

Thanks

GB

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

#top-bar{
height:100px !important;
}

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

#top-bar{
height:auto !important;
}
}

Thanks
Mohammad

[thebeesons]

Hi Mohammad,

Only limited success with that I’m afraid:

– The top-bar now appears on desktop and mobile (below the header area?) but not tablets at all.

– It isn’t any larger (still 36px high)

– Text isn’t centred

Sorry to be a pain – any further thoughts?

GB

[Mohammad – SUPPORT]

Hi,
Please provide me marked screenshot image to understand the changes.
Thanks
Mohammad

[thebeesons]

This reply has been marked as private.

[David Martin – Support]

Hi,

To increase the height, please increase the padding using this:

#top-bar {
    padding: 50px;
}

Centering the text is difficult as you currently have two left/right text blocks inside the top bar. Are you going to remove one, ex remove the right? If so we can use CSS to center the left content box up.

Thanks.

[thebeesons]

Hi David,

Centering one of them would be perfect – I only have ‘xxxx’ there at the moment as a placeholder.

Unfortunately the code you supplied doesn’t seem to have worked, I’ve removed the code previously supplied by Mohhamed incase there was a conflict – but no joy?

Thanks

GB

[David Martin – Support]

Hi,

The CSS was not working as you had a CSS error, your media query was missing a closing bracket, }.

I have updated your CSS to this, it know works:

#top-bar {
padding: 50px 0;
}
#top-bar .col-sm-6 {
    width: 100%!important;
    text-align: center!important;
}

Thanks.

[thebeesons]

Schoolboy error – Thanks David,

Amazing support as ever.

GB

[Mohammad – SUPPORT]

Hi,
Great thanks to David.
Mohammad