Prime Community Forum

Posted: **24 Aug 2016, 12:23**

When swithcing to responsive mode on Titan the list of top bar menu items can format in a bunch of unaligned entries, such as below

Is there a way to get them to list in a series like in Spark (below), or Omega,

Thank you.

Posted: **24 Aug 2016, 15:50**

Can you please attach your topbar.xhtml for us to replicate?

Posted: **26 Aug 2016, 19:14**

Yes of course, thank you

I notice that the spark layout.js is around three times the size (20k) vs Titan's layout.js and I wonder if the differentiation is in there.

Code: Select all

<ui:composition 

    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">


    <!-- TOPBAR -->
    <div id="layout-topbar">

        <!-- LOGO -->
        <a href="index.xhtml" id="logo">

            <p:graphicImage name="images/logo.svg" id="forFlying"  library="titan-layout" />
            <p:graphicImage name="images/logo.svg" id="forFixed"  library="titan-layout" />

        </a>

        <!-- MENUBUTTON -->
        <a id="menu-button"> <i class="icon-chevron-down"></i> </a>

        <!-- SEARCH -->

        <!-- TOPBAR LINKS -->
        <a id="topmenu-button"> <i class="icon-list2"></i> </a>

        <ul id="topbar-menu">
            <li><a href="https://osiitservices.com/osi/faces/prv/index.xhtml"><i class="fa fa-sign-in" style="color: #046b99;"></i> Log In</a></li>
            <li><a href="testimonials.xhtml"><i class="fa fa-quote-left" style="color: #046b99;"></i> Testimonials</a></li>

            <li><a href="#"><i class="fa fa-mobile-phone" style="color: #046b99;"></i> The digital advantage</a></li>
            <li><a href="locations.xhtml"><i class="fa fa-street-view" style="color: #046b99;"></i> Locations</a></li>
            <li><a href="#"><i class="fa fa-group" style="color: #046b99;"></i>Specializations</a></li>
            <li><a href="signup.xhtml"><i class="fa fa-pencil-square-o" style="color: #046b99;"></i> Signup</a></li>
            <li><a href="contact-us.xhtml"><i class="fa fa-comments-o" style="color: #046b99;"></i> Contact us</a></li>
            <li><a href="pricing.xhtml"><i class="fa fa-dollar Fs18 " style="color: #046b99;"> </i> Pricing</a></li>
            <!--
            <li>
                <a class="Animated05 CursPointer"><i class="fa fa-user"></i> Welcome Hoe  <i class="fa fa-chevron-down Fs14 Fright ShowOnMobile"></i></a>
                <ul style="width:175px; margin-left:-10px;" class="Animated03 submenu">
                    <li><a class="Animated05"><i class="fa fa-user Fs30 Fleft"></i> <span class="Fright Fs20 TexAlRight"><span class="Fs10 DispBlock">   
                                </span></span></a></li>
                    <li><a href="mypendingtasks.xhtml" class="Animated05"><i class="fa fa-suitcase"></i>Open Tasks </a></li>
                </ul>
            </li>
            -->
        </ul>

        <!-- MENU COVER -->
        <div id="layout-menu-cover">
            <ui:include src="layoutmenu.xhtml" />
        </div>

    </div>

    <!-- TOPMENU -->
    <ul id="top-menu" class="MarBot30">
        <li class=" ">  &#x0020;  .. </li>   
    </ul>

</ui:composition>

Posted: **29 Aug 2016, 16:07**

Also with Titan I am unable to add a submenu item to the menu bar, in Spark it works well and looks like

Code: Select all

 <li>
                        <a class="Animated05 CursPointer"><i class="fa fa-user"></i> John DOE, Welcome <i class="fa fa-chevron-down Fs14 Fright ShowOnMobile"></i></a>
                    <ul style="width:175px; margin-left:-10px;" class="Animated03 submenu">
                        <li><a class="Animated05"><i class="fa fa-user Fs30 Fleft"></i> <span class="Fright Fs20 TexAlRight">John DOE<span class="Fs10 DispBlock">Last login 18:50</span></span></a></li>
                        <li><a href="#" class="Animated05"><i class="fa fa-dashboard"></i> My Profile</a></li>
                        <li><a href="#" class="Animated05"><i class="fa fa-magic"></i> My Settings</a></li>
                        <li><a href="#" class="Animated05"><i class="fa fa-suitcase"></i> Tasks <span class="notification-bubble BordRad3 Fright">24</span></a></li>
                        <li><a href="#" class="Animated05"><i class="fa fa-quote-right"></i> Notifications <span class="notification-bubble BordRad3 Fright">18</span></a></li>
                    </ul>
                </li>

The demo does not have any submenu's and when trying to add them in a similar manner in Titan the submenu items show up without opening up the drop down. These two menu issues; unaligned entries on mobile, and no drop down are the only things holding me up, otherwise primefaces rocks.

Posted: **02 Sep 2016, 19:57**

Any ideas, progress?

I've bought another theme, the newest Ultima, but for this application Titan is still the best purchase I've made and I'd like to get it to work.

Thank you.

Posted: **08 Sep 2016, 14:57**

First issue; What is the height and width of logo.svg?
Second issue; Titan doesn't support nested topbar item like topbar of spark.

Posted: **08 Sep 2016, 15:18**

For first issue, please try;

Code: Select all

<style type="text/css">
    .FlyingTopbar #menu-button,
    .FixedTopbar #menu-button{
          margin-left: 150px; /* you can change this value according to width of your logo */
    }
    #logo {
         position: absolute;
         left: 14px; /* you can change this value according to your logo */
         top: 16px; /* you can change this value according to height of your logo */
    }
</style>

Prime Community Forum

Menu bar on Titan on mobile devices shows unaligned entries

Menu bar on Titan on mobile devices shows unaligned entries

Re: Menu bar on Titan on mobile devices shows unaligned entr

Re: Menu bar on Titan on mobile devices shows unaligned entr

Re: Menu bar on Titan on mobile devices shows unaligned entr

Re: Menu bar on Titan on mobile devices shows unaligned entr

Re: Menu bar on Titan on mobile devices shows unaligned entr

Re: Menu bar on Titan on mobile devices shows unaligned entr