Docs

[smsfthinker]

Hello there,

I was wondering how I can achieve a top bar menu like this one http://irislillian.com/ or should I jsut adjust the code on my header menu to achieve the same effect. My site is http://blogwithconfidence.com/

Kind regards,
Helen

[Friech]

Hi Helen,

Thanks for writing in! You can create a new menu and assign that as your Topbar menu. To do this please follow this post: https://community.theme.co/forums/topic/adding-a-menu-to-topbar/#post-1116716

Hope it helps, Cheers!

[smsfthinker]

Thanks Friech,

I’ve followed the instructions and now need some help to CSS style the top bar.

I would also like the top bar to have a search icon and the social media icons.

Can you please give me some help to make it look like this topbar?

http://irislillian.com

Kind regards,
Helen

[Paul R]

Hi Helen,

To achieve that, you can add this under Custom > edit Global CSS in the Customizer.

.x-topbar .menu li {
    position: relative;
}

.x-topbar .menu .sub-menu {
    display:none;
    position:absolute;
    min-width: 250px;
    background-color: #fff;
}

.x-topbar .menu .sub-menu li {
    display:block;
}

.x-topbar  li.menu-item-has-children:hover .sub-menu {
   display:block !important;
}

.x-topbar #menu-top-bar-menu {
   float:left;
}

.x-topbar .x-social-global {
    margin-top: 25px;
}

Hope that helps.

[smsfthinker]

Hi Paul,

It didn’t quite work as you can see http://blogwithconfidence.com/

Helen

[Nico]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[smsfthinker]

This reply has been marked as private.

[Paul R]

This reply has been marked as private.

[smsfthinker]

Thanks Paul,

Almost there.

How can I:

1. change the font weight to 600;
2. add the search icon to the right of the social media icons with a border like in http://irislillian.com/
3. display the menu arrow so that Blog Post Recipes items display in the dropdown.

Regards,
Helen

[Paul R]

Hi Helen,

I have adjusted the css, to add the search please add the code below in your _topbar.php after <?php x_social_global(); ?>

<div class="my-search"><a href="#" class="x-btn-navbar-search"><span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span class="x-hidden-desktop"> Search</span></span></a></div>

The file is located in wp-content/themes/x-child/framework/views/global

Hope that helps.

[smsfthinker]

Thanks Paul,

I’ve added the code to the php file for the search icon.

Are you able to adjust the CSS so that the search icon displays in line with the menu text, plus is displayed to the right of the social media icons with a border like in http://irislillian.com/?

Appreciate your help.

Helen

[smsfthinker]

PS How to only display the top bar and footer menus?

When I ‘de-select’ the nav bar menu I’m left with a message to assign a menu.

Regards,
Helen

[Rad]

Hi there,

Please add this custom CSS as well,

.my-search {
line-height: 38px;
}
.x-navbar {
display: none;
}

Cheers!

[smsfthinker]

Thanks Rad,

Can you please tell me how to reduce the depth of the topbar. Currently there is a lot of space under the text. I would like there to be an even amount of space (padding?) above and below the menu, as displayed here http://irislillian.com/

Kind regards,
Helen

[Rue Nel]

Hi Helen,

To reduce the topbar, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

body.x-navbar-fixed-top-active .x-navbar-wrap {
    display: none;
}

This will hide the navbar because at the moment the space is coming from the topbar which made the topbar to look like there is some space below it.

Hope this helps. Please let us know how it goes.

[Author]

Posts