Text in Top Bar or header

Hi.

Could you tell me how to get a text to the header additional to a logo (or a Top Bar?) to the right, so it can be sticky?

Summary

Example: https://www.liverental.de/de/

Hello @zirgon,

Thanks for writing in! :slight_smile:

Sure. As of now, since we don’t have any idea what theme you are using, we will provide you instructions per theme.

For Pro:

You need to make your header bar white, you will also set the position to absolute so it stays over the slider. Don’t forget to set it to sticky.

Here’s an intro guide to refer about Pro’s header and footer builder:

For X:

Kindly check some tips from one of our page: https://xthemetips.com/transparent-fixed-header/129/

From the article title itself, it says transparent. However, we wanted to achieve white header background, so please use the CSS code instead:

.x-navbar {
border:none;
box-shadow:none;
transition:background .7s ease-out;
background:#fff!important;
position:fixed;
z-index:1030;
top:0;
left:0;
right:0;
}

.x-navbar.pasthero {
border-bottom:1px solid #ccc;
background-color:#fff!important;
box-shadow:0 .15em .35em 0 rgba(0,0,0,0.135);
-webkit-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

.x-navbar.pasthero a,.x-navbar.pasthero .desktop .x-nav > li > a {
color:#000!important;
}

.x-navbar .desktop .sub-menu {
background:#fff;
font-size:16px;
}

.x-navbar-fixed-top .desktop .sub-menu {
background:#fff!important;
}

.x-brand:hover,.x-brand:focus {
color:inherit;
}

.entry-content {
margin-top:0;
}

Hope that helps.

Sorry, I forgot to mention that I’m using X.

That looks good. I know where to put the css code. But I’m struggling how to get the text fixed at that position as I am not familar with CSS. Where do I write down the content, lets say a telephone no. ?

Many thanks in advance
Alessandro

Hi,

To add content, add the code below in your child theme’s functions.php file

function x_output_primary_navigation() {  ?>

      <div class="header-right" style="float:right;padding:20px;">
             <!-- THIS IS WHERE YOU ADD YOUR CONTENT -->
             <span class="telno">Tel: 0211 1234 5678</span>    
      </div>

    <?php
    if ( x_is_one_page_navigation() ) {

      wp_nav_menu( array(
        'menu'           => x_get_one_page_navigation_menu(),
        'theme_location' => 'primary',
        'container'      => false,
        'menu_class'     => 'x-nav x-nav-scrollspy',
        'link_before'    => '<span>',
        'link_after'     => '</span>'
      ) );

    } elseif ( has_nav_menu( 'primary' ) ) {

      wp_nav_menu( array(
        'theme_location' => 'primary',
        'container'      => false,
        'menu_class'     => 'x-nav',
        'link_before'    => '<span>',
        'link_after'     => '</span>'
      ) );

    } else {

      echo '<ul class="x-nav"><li><a href="' . home_url( '/' ) . 'wp-admin/nav-menus.php">Assign a Menu</a></li></ul>';

    }

  }

Hope this helps

Hi Paul,

it worked so far. I’m sorry to ask real basics here, but could you tell me how I can style that text now in bigger and bold? I thought I just could add an X Icon like [x_icon type=“mobile-phone”], but it just shows the raw text on the frontend.

The main logo is still visible in at the center now, but its half covered by the nav bar on top.

Hi There,

You can add a custom CSS rule into your Theme Options > Global CSS area and adjust it accordingly.

.navtop_infos span.line1 {
    font-size: 1.2em;
    color: red;
}

Hope that helps.

1 Like

Unfortunately it took no effect on the front end whenn added the custom css :confused:

Is there custom CSS needed for X icons as well?

Hi There,

Thanks again for the update!
Can you update the above CSS to the below?

.navtop_infos span.line1 {
    font-size: 1.2em !important;
    color: red !important;
}

As I see you have not added the code, please confirm.

Regarding the icon you can use <i class="x-icon x-icon-mobile-alt" data-x-icon="&#f10b;" ></i> instead of the shortcode.
You can check the full list of an icon here https://fontawesome.com/cheatsheet
Hope this helps!

Thanks

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