Okay
  Public Ticket #3711515
Navigational/UI elements take up too much space
Open

Comments

  •  6
    selinkocagoncu started the conversation

    Hello,

    Certain UI elements are taking up too much space, creating a distracting experience for the visitor and causing the site to seem somewhat amateurish. 

    On desktop view, the calendar navigation takes up 2 lines even though it could easily fit on a single line. On mobile, it gets worse with 3 lines of navigation even though a single line would have been enough. 

    For both desktop and mobile, would it be possible to display the navigation in a single line as follows:

    • Month View:
      • Right-aligned: Month, Search, < >
      • Left-aligned: Categories, Locations, calendar view options
    • Today View:
      • Right-aligned: <
      • Left-aligned: >

    Since Categories and Locations filters also utilize the symbol ">", would it be possible to display them without text and simply using their mobile icons (namely the folder icon and the map pin icon)?

    I hope you can help! Thank you in advance for your time and attention!



    PS: Regarding the missing elements in the above lists, please see ticket 3711506.

    Attached files:  2-line-nav_Desktop.jpg
      3-line-nav_Mobile.jpeg

  •  894
    Zhivko replied

    To remove the filters text (Category, Location) etc from the buttons you can use:

    .stec-top-filter-selector-toggle-icons,
    .stec-top-filter-title stec-span {
      display: none !important;
    }

    To display the top menu items in a single line, set the top menu container to a flexbox. Something like this:

    .stec-top {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .stec-top > * {
        flex: 1;
    }
    


    Stachethemes Developer

  •  6
    selinkocagoncu replied

    All the menus are listed in a single line now, thank you! However, I could not get the filter text removing code to work: Tried adding it to the widget's custom CSS , the page's custom CSS, as well as Wordpress Customizer's; but I see no changes on my pages.

    Would you know what the issue could be? 

    This is important because the website will be in English and French, so English labels would make the site difficult to navigate (as well as uninviting) for the Francophone.

    I hope you can help!