Loading ...

Nav bar issues (text color & icon uniformity) | Communifire Support

Home » Spaces » Communifire Support » forum » Report Bugs and Issues » Nav bar issues (text color & icon uniformity)
Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Edit navigation item

Required The name that will appear in the space navigation.
Required
Required
Required The url can point to an internal or external web page.
 
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Report Bugs and Issues

Nav bar issues (text color & icon uniformity)

Subscribe to RSS
  • I'm trying to do the following:

    1. White text for the nav bar on full screen (but NOT for the hamburger drop down) -- everything I've tried changes both

    2. No icons for the nav bar dropdowns on full screen view on "About Us" or "Requests"

    3. Have icons look uniform (all like "home" "employee resources" and "technology") icons

  • Hi Sierra,

    We are looking into this.

    Thanks,
    Raghav

  • Answered

    Hi Sierra,

    We have added two rules in CSS Overrides (/admin/settings/manage-css-overrides) to make it look like you mentioned:

    .zeppelin-sub-header .container .row-fluid .span12 ul.x-head-block-container>li>a {
        color: var(--zeppelin-header-icon-color-light);
    }
    
    @media (max-width: 979px) {
        .zeppelin-sub-header .container .row-fluid .span12 ul.x-head-block-container>li>a {
            color: inherit;
        }
    }

    That will make the screens like this:

    Normal layout:

    Menu (Small devices):

    Thanks,
    Raghav

  • This is great for #1 -- what about the icon issues (#2 and #3) from original post? Thanks!

  • We are on it.

  • The li items in that menu are different. Some are dropdowns and some are plain li items.

    I have added the following CSS (/admin/settings/manage-css-overrides) to make them look alike:

    .zeppelin-sub-header .container .row-fluid .span12 ul.x-head-block-container>li>a i.link-item-icon {
        width: 25px;
        opacity: .7;
        margin-left: 5px;
    }

    Thanks,
    Raghav

  • Finally, for your second point I have added the following rules:

     

    .zeppelin-sub-header .container .row-fluid .span12 ul.x-head-block-container>li>a i.link-item-icon {
        display: none;
    }
    
    @media (max-width: 979px) {
        .zeppelin-sub-header .container .row-fluid .span12 ul.x-head-block-container>li>a i.link-item-icon {
            display: inline-block;
        }
    }

    That will make the screens look like:

    Normal mode:

    Small devices:

    Thanks,
    Raghav

     

  • Thank you!

Page 1 of 1 (8 items)