Topic Closed
mabu
372 Posts
5.9K Downloads
4 Themes
9 Plugins

I use a modified blogstrap - template , which has a responsive - button at the left side.

But in the narrow-mode ( less than 250 px)  the button appears, and the dropdwon-menu melts with the background.

It functions but is realy fiddely - and not for users. (universal-path.org)

I am looking for a css-mod to give the dropdown the top - z - index or similar

(It is difficult to determine the classes with firefox -> inspect element in the narrow mode)

@media only screen and (max-width: 350px) {
 ul.nav.navbar-nav { z-index:1000000; background-color:white;
   overflow-x: hidden;} }

or

@media only screen and (max-width: 300px) {
  div.navbar-collapse.collapse.in {
    z-index:1000000; background-color:white;
   overflow-x: hidden; }
}

does not help. The scrollbar is there. but it disappears when trying to access it with the mouse...

(The original Blogstrap has no sidebar and the dropdown is as broad as the screen - but i have not limited its size by a custom.css)

 

Edited: 3 years ago#11020

juergen
1.5K Posts
60.6K Downloads
16 Plugins

I see a secondary menu present in the navbar (probably a leftover version of the main menu), which is made entirley transparent by this css rule:

.nav4 > li:first-child {
  opacity: 0;
}

This menu is still consuming space and thus messes with the mobile dropdown navigation.
If you don't need it, just remove it using Layout Editor*.

Furthermore I'd remove all the inline styles such als floats and positioning because they cannot be overridden by Bootstrap's menu handling css/js, unless !important is used (which Bootstrap actually does, but only in some rare cases)

This should at first make the behavior a bit clearer.

edit: * if you cannot remove it, comment out the line $GP_ARRANGE = false; in template.php, but I guess you already have done so.

Edited: 3 years ago#11023

mabu
372 Posts
5.9K Downloads
4 Themes
9 Plugins

Thank You - the mentioned second menu m1 with its own tree is for a further expansion - i had not much time when i generated it  and made it invisible .

The content which i planned made my site-search slow , but since php7 and a higher version of my account  the search became faster.

I think i will make instead a bootstrap sidebar at the left for handy users.

Do You have  a special tool that You saw the .nav4 > li:first-child {   opacity: 0; }  so quick. ?  In my custom.css are a lot of superfluous disturbing stylings with buttons and backgrounds etc. which i should delete.

Edited: 3 years ago#11027

juergen
1.5K Posts
60.6K Downloads
16 Plugins

Do You have  a special tool that You saw the .nav4 > li:first-child {   opacity: 0; }  so quick. ?  In my custom.css are a lot of superfluous disturbing stylings with buttons and backgrounds etc. which i should delete.

Nothing special, only the browser's inspector. But it wasn't exactly easy to spot ;)
 

3 years ago#11030

juergen
1.5K Posts
60.6K Downloads
16 Plugins

I think i will make instead a bootstrap sidebar at the left for handy users.

You have a lot of content. Bootstrap navbars aren't too well suited for 3+ menu levels.
Have you tried the Cajón theme? I made it for such cases and it handles deeply nested menu levels quite well.

edit: On the other hand, Cajón doesn't let one access heading menu pages, so it would need some hacks in your case.

 

Edited: 3 years ago#11031

mabu
372 Posts
5.9K Downloads
4 Themes
9 Plugins

The Cajón theme is for special users - its outlook is not for everybody.  I need a template with a fast overview.

The dark templates are no longer  'in'. The bootstrap 4 -  top menu maybe interesting for Handy users - with an  automatic

themeswitch in the template(though i have a iphone-user from india, who has a permanent connection to my site and uses 5o% of my bandwith)

A modified Bootswatch - Theme would be better in my case - but i have so many on my harddisk ...

Another idea is a material-light theme, which i try to develop (for ...late...august) at the moment - with a jquery dropdown.

I solved the deep menus in my momentary template with an automatic appearing additional  sidebar at the right side -

There is no problem how to add a bootstrap sidebar at the right top and to remove the collapse - class etc..

Edited: 3 years ago#11032

juergen
1.5K Posts
60.6K Downloads
16 Plugins

The dark templates are no longer  'in'

Maybe, Cajón has a live switch for that in the Theme Options in the Admin Top Bar (a few lines of css will also change it).
But of course it's a matter of taste.

Another idea is a material-light theme…

Have you seen Bootswatch4 Scss*/material? Its quite there.

Edited: 3 years ago#11034

mabu
372 Posts
5.9K Downloads
4 Themes
9 Plugins

Bootswatch Material has a material style but not the google material css. It is quite useful and easy restylable  -  the dropdown at the top is modern but not my taste - some features of bootstrap4 are made as there must be something new(an exception is flex)

An idea is to add a material-min.css (https://www.materialpalette.com/blue/light-blue or https://code.getmdl.io/1.3.0/material.blue-light_blue.min.css), evtl. only as import to the custom.css, and so get a Bootstrap-material template.

The full Bootstrap 4 Material  has over 400 KB to load, some templates up to 2MB css and js - so it is not for slow lines.

Material lite is small as Bootswatch Material, and i made an iconset, and i will make a template  - and it is modern.

Another light material fw - example is http://mildrenben.github.io/surface/ without js.

Practical materialize - examples are https://themes.materializecss.com/pages/demo#polygon or better https://materialize-shopify-themes.myshopify.com/ . and also https://demo.templateflip.com/material-portfolio/portfolio.html

For a smartphone user it is easier to klick an a button at the left top, which is easy to implement.

 

( Hier mal eine Demoseite - noch nicht vollkommen aber..)

 

Edited: 3 years ago#11036

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Ennetbürgen (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Websi...

Find out more about our Provider Spotlight

Log In

  Register