Change top header

edited August 2018 in Busiprof

Currently im working on this website:

I want to align the text of the email in the top header to the right.

I also want to change the color of this top header from red to #222629

I also have a problem with the size of the logo. The logo is good by desktop.
Only the logo is above the menu when i visit the site by mobile.

I would like to reduce the logo only by mobile visits so that this logo comes next to the menu icon.


  • Hi, @richard-beukema

    Thanks for contacting us.

    For text mail, you have currently placed the "WBR: Header Widget" in "Top header left area". Drag that "WBR: Header Widget " for email to the "Top header right area", so that along with contact number, an email will also appear on the right side.
    Like as in the screenshot

    Let me know did it work!

  • Thankt for you response.

    its below each other now.

    I would like to have it next to each other.

  • Hi, @richard-beukema

    For this change, you need to add a child theme of BusiProf. Please create a child theme, ignore if you already running.
    Create a new file in it with name header.php and edit it to paste the code for the LINK

    Now activate your child theme and add the Custom CSS in your theme's custom CSS box:

    /*top-header-widget: for custom Header*/
    text-align: right;
    .top-header-widget .widget.busiprof_header_info_widget{
    padding: 0px 0px 0px 14px;
        display: inline-block;
    /*top-header-widget: for custom Header*/

    Let me know did it work!

  • Hi,

    This is great, thanks!

    Now i want to change the color of this top header from red to #222629
    How can i do that ?

  • Just copy & paste the below CSS in your theme's custom CSS box:

    .top-header-widget {
        background-color: #222629;

    Let me know is it the same!
  • I copy en paste the code in my CSS.

    There was nothing happend.

  • Try this one:

    .top-header-widget {
        background-color: #222629 !important;
  • Thanks, you are great!! On desktop view it is perfect now.

    But now i have this on mobile, is that posible to center it ?
    Ore just make a small Phone ore mail icon link on mobile view ?

    Mobile view.JPG
  • For mobile view to appear set to centre, copy to paste below CSS:

    /*top-header-widget: for mobile*/
    @media only screen and (max-width: 600px) {
        .custom-right-webriti {
        text-align: center  !important;
    /*top-header-widget: for mobile*/

    Let me know again after that!
  • Great, thanks.

    Can you do the same for the logo / menu icon on mobile view ?

    The logo is above the menu icon on mobile.

    I would like to have the logo near the menu icon on mobile view.

  • Hi, @richard-beukema

    It seems you already have placed media query for mobile regarding Logo Width. It needs your wp-admin details so that we can achieve the tested adjustable CSS for the same. Please create another new thread for the same. Till up to here if resolved then please allow us to close this ticket.

  • Oke, you can close this one.
  • Glad to help you!

    You can rate us with your kind review if you like our Theme and Support.

    Thanks for contacting us :)
This discussion has been closed.