Docs

[imunirul]

Hi:
I am using integrity-5. I want to show a top bar menu instead of showing “OTHER | INFO | CAN | GO | UP | HERE”

I am trying to achieve similar to the top bar in http://www.uwsa.ca that shows a menu with drop-downs at the top.

Please suggest how to do that?

Thanks,
Munir

[Rahul]

Hey There,

Thanks for writing in!

You can enable this topbar under Customizer > Header > MISCELLANEOUS > Topbar > select On:

Put the right content there to change it accordingly!

Hope this helps!

[imunirul]

I have added a menu to left side of top bar and search bar to right side of top bar.
But the menu seems broken. Screenshot attached.

Link to my site: uwgss.techniqasolutions.com

I downloaded child theme and updated _topbar.php in global folder


<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

<div class="x-topbar">
<div class="x-topbar-inner x-container max width">
<?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
<p class="p-info">
<?php wp_nav_menu( array('menu' => 'TopBar' )); ?>
</p>
<?php x_social_global(); ?>
<div class="topbar-search"><?php get_search_form(); ?></div>
<?php endif; ?>
</div>
</div>

<?php endif; ?>


Also added to global css:
.x-topbar p.p-info {
display:block;
float:left;
width:auto;
line-height:46px;
}

.x-topbar .x-social-global {
display:block;
float:right;
width:auto;
line-height:46px;
}

.x-topbar .topbar-search {
display:block;
float:right;
padding-top:6px;
}

.x-topbar .topbar-search .search-query {
max-width:190px;
}

How can I fix the top bar menu please? Let me know if you need access to backend.

[Lely]

Hello Munir,

Please also add the following custom CSS:

.menu-topbar-container {
    display: inline-block;
    float: left;
}
ul#menu-topbar {
    display: inline-block;
    float: left;
    margin-left: 0;
    margin-bottom: 0;
}
ul#menu-topbar>li {
    display: inline-block;
}
ul#menu-topbar>li:first-child >a {
    padding-left: 0;
}
ul#menu-topbar>li >a {
    padding: 0 10px;
    color: red; /*Change to your preferred font color*/
}

Hope this helps.

[imunirul]

This works if the menu is single level. but doesn’t work for multi-level menus.

For example,

– a
– b
– c

is fine.

But

-a
-b
—–c
where c is a submenu under b and it breaks!!!

screenshot attached. Please suggest.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

ul#menu-topbar li {
    list-style: none;
    float: left;
    padding: 5px;
}
ul#menu-topbar {
    width: 100%;
    display: flex;
}

If it still doesn’t work for submenu items, please add some so we can see the issue.

Hope that helps.

[imunirul]

this looks better but I want the menu drop down effect

screenshot: https://www.diigo.com/item/image/5rkv5/2pyw

[Rupok]

Hi there,

Would you clarify what you are referring as the dropdown effect?

Thanks!

[imunirul]

by dropdown effect I mean, when you hover or click mouse on a menu item, the submenu drops down, which I think the usual expectation from a menu.

Secondly, I am trying add following code in Customizer > Footer > Footer Content:

<div class="container">
    <!-- Example row of columns -->
    <div class="row">
        <div class="col-md-6">
            <h2>Heading</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
            <p><a href="#">View details »</a></p>
        </div>
        <div class="col-md-6">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a href="#">View details »</a></p>
        </div>
        <div class="col-md-4" data-pg-collapsed>              
</div>
    </div>
    <hr>

</div>

It shows up as: https://www.diigo.com/item/image/5rkv5/g5c4

It should be showing as attachment where Heading1 and Heading2 are side by side rather than Heading1 being stacked on top of Header2, plus all content is centered rather being left aligned.

`

[imunirul]

I followed https://community.theme.co/forums/topic/managing-costum-css-and-html-div-elements/
to have two div(s) side by side in Footer content under Customizer.

I tried to use the shortcode “column” in Footer content but didn’t work.

[column type="1/2"] Place your content in here. [/column] [column type="1/2" last="true"] Place your content in here. [/column]

[Rue Nel]

Hello There,

Thanks for the updates! That code should have work out. I have tested it in my local test server. It should look like this: http://prntscr.com/cfg31v

I even modified it using your content in your previous post. I used this content:

[column type="1/2"] <h2>Heading</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
            <p><a href="#">View details »</a></p>[/column] [column type="1/2" last="true"]<h2>Heading</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a href="#">View details »</a></p>[/column]

And it works just fine. I have this look:

Hope this helps.

[imunirul]

Thanks,

firstly, if you look at this: https://www.diigo.com/item/image/5rkv5/1d8i

I want to remove the footer1/footer2/footer3/footer4
and add two different background colors in footer bottom – blue on top and black down below. How to do that?

—-
secondly, here is a screenshot of my top bar: https://www.diigo.com/item/image/5rkv5/9ca2
As you can see, in top bar menu, sub-menu is hard-coded (see, scholarships menu item).
I want the submenu to be invisible only to be visible when user clicks scholarships menu item.
Also, top menu, search bar and social icons is not aligned. How to fix these?

[Rupok]

Hi there,

Thanks for clarifying.

#1. You can add this under Custom > CSS in the Customizer.

.x-colophon.top {
  background-color: #1b429a;
}

.x-colophon.bottom {
  background-color: #333;
}

#2. Unfortunately it’s not possible to add dropdown menu to the topbar. As you have hard-coded that, you need to add your own styles as well if you want dropdown feature.

Cheers!

[Author]

Posts