How to move search box to navigation bar in Simpel

I’m a new WordPress user designing a site with theme Simpel. I’ve searched this forum but can’t find an answer to my query. I’ve managed to move the navigation bar down from above the header image to below the Search bar but I now want to move the search box from the Search bar to the right of the navigation bar (and then remove the blank search bar). I’ve tried for ages to do this but can’t. Can anyone with more experience please help me? Txs

Is a floating, collapsible bottom navigation bar a good pattern on mobile web?

I’m working on a mobile web app that has two pages (tabs) of equal importance. As the user will switch between the two frequently, I’m worried that displaying a classic navigation bar at the top of the screen will prove frustrating and harm the experience.

I’ve found a few examples of mobile websites with bottom navigation bars (Pitchfork and Quartz) but these are problematic on iOS:

  • When Safari’s toolbar is collapsed, taps on the navigation bar will be ignored and will instead summon Safari’s toolbar back into view. This makes the navigation bar a moving target and requires a second tap in order to use it, adding friction to the experience;
  • On iPhone X and XS, when Safari’s toolbar is collapsed, the navigation bar is rendered behind the Home Indicator, looking visually unpleasant and inaccessible. Click here to see an example.

I was able to work around both of these issues by implementing a navigation bar that is floating, and collapses away at the same time as Safari’s toolbar does. The collapsing is helpful as it means the navigation bar will be out of the way of the content, won’t clash with the home indicator, and won’t require the user to tap it twice to use it.

You can experiment with this proof-of-concept here (this only works on iOS Safari). You can see a gif of the proof-of-concept in action at the bottom of my post.

While the proof-of-concept seems to behave satisfactorily, I have a few concerns I’d like to ask about:

  • Is this pattern a good idea for a mobile web app? Is it unexpected enough to result in a net loss in usability?
  • Is it confusing to keep the navigation bar hidden while Safari’s interface is collapsed and, if so, should I use some sort of indicator to show the user how to summon it?
  • How should I go about testing whether this pattern is effective and clear to my users?

gif of the proof-of-concept

Vertical navigation UX – Scroll or collapse

Which is preferred?

  • Scrollable (left) – 2nd-level always visible, scrolls if overflows
  • Toggleable Expansion (right) – 2nd level only visible if initiated by user (e.g. accordion or expand/collapse)

Assuming “depends” is a given, what are cases which one would be preferred over the other. Are there any alternatives to this style of vertical navigation where horizontal navigation is not an option (space is already utilized for another purpose).

Scrollable Nav Collapsable Nav

How to implement hash based navigation on a D8 site?

So the specific functionality I’m looking for is a link on one page (e.g. drupalsite/home) leading directly to a specific section of another page (e.g. a section on drupalsite/otherpage).

I believe that to implement this I need to use hash based navigation such that the content I want to link to is has it’s css class name preceded by a hash (pound sign or number symbol) <div class="#mydiv"> and is linked to by including the hash referenced content in the href attribute of an anchor tag. Such that <div class="#mydiv"> on page drupalsite/mypage via <a href="/mypage#mydiv">. Will this work without out of the box with just html changes? Or is additional jquery configuration necessary? I know that more specific and fluid implementations will necessitate JS and JQuery, but I want to know if the core html functionality works without conflicting with Drupal’s internals?

Как двигать header при открытии drawer navigation?

У меня есть drawer navigator и stack navigator, открывается drawer, но header от stack navigator остается сверху, а не уходит направо. Как можно сделать так чтобы он работал так? мой код

const DrawerNavigator = createDrawerNavigator({ Home: {     screen: Menu }, Test: {     screen: Test }  },{     drawerBackgroundColor: 'red',     //contentComponent: CustomDrawer, })  const StackNavigator = createStackNavigator(     {       Main: {         screen: DrawerNavigator,       }     },     {         mode: 'modal',       headerMode: 'float',     },   ) 

как есть как должно быть

multiple book navigation blocks/ Navigation for COLLECTIONS of books

I’m working in a projet that I have to show a COLLECTIONS of books. In this website I managed using the books navigation block, for one collection with many books, with css I managed to set a tree view and indication where you are. But only allow one collection of books. The problem is that I have to make as least 23 collections of books. Each collection belong to a Province with educative books of these provinces. There is a way to replicate that book navigation for each collection? Could I make them with block menu with tree view and the same css style? I think the concept of collections of books are missing considering the editorial point of view . I appresiate any help. Thanks.

Best practice to combine sub-category selection and drilldown in Mobile navigation

I’m working on a mobile application that allows selection of a category on one of its screens. For example:

enter image description here enter image description here

There can be more than 2 levels in the hierarchy and the amount of items is not limited by the app. Users can customise the categories to their liking.

On each of the screens the user should be able to:

  • select a category/subcategory, OR
  • drill down into the subcategory (see the second screenshot)

How would you implement such a UI? Do you know any good examples where this issue has been solved? I would really appreciate your help.

It’s been puzzling my mind over the last couple of weeks. I’ve came up with a couple of solutions but they all just feel wrong, not something that would fit the mobile UI/UX.


What type of navigation to use for middle sized website?

I am redesigning a website for our association with around 40 pages, which may be divided into the 4 main categories, each containing the same number of links.

On the old, outdated site, the links were in the single sidebar, which required the large ammount of scrolling due to the font size. The major audience are people over 50, so the aim is not to make the drastic change to the navigation, so they do not get confused and they view the website mainly on the desktop.

The initial idea was to include the navigation on the right side of the header, where each category is a drop-down menu with the links, however drop-down menus are not considered to be the good UX practice, moreover, the navigation appears to be chaotic on the screens with lower width due the long name of our association (25 characters), i.e. there is a small space between the name of the assoc. and the navigation.

The another idea is to use a mega menu, where all of the four categories with their links are listed. Moreover, each category would be visually separated by using the one of the four dominant colors of the assoc. Also, all links on the one screen would resemble the old site’s navigation the visitors are used to.

All sources I have found, state, that mega menus are the good decision for huge websites, e.g. for corporations or eshops with hundreds of pages, where each main category has its own mega menu.

Is using the single mega menu for the whole website (triggered by clicking the menu button) the good idea?

Thank you for your suggestions.