Navmenu bar disappears when I active Bootstrap css - wordpress

After I active Bootstrap to my theme I am developing in Wordpress - my nevmenu disappeared. It is there when I scale the website down (max widt 980px) and is visible as a collapse menu. Maybe there is some .nav styling from Bootstrap that are conflicting with my theme.
Can you please help me finding out what it is?
Here is a link to the website: http://list.thorsteinnhelgason.is/index.php/2018/02/15/prufupostur/
Best B

Saw your site, you messed up the content within navbar, your nav is there but it's not displaying at a block level.
I would suggest you use this one instead, I'm using the same. wp-bootstrap-navwalker. The developer has explained a great deal of using it. Try it.

The navbar you are using is Bootstrap v4, but your stylesheet is using v2.3.2: http://list.thorsteinnhelgason.is/wp-content/themes/listin/bootstrap/css/bootstrap.css
If you are unable to upgrade WordPress for some reason, you can add this style:
.navbar-toggleable-md .collapse {
display: flex !important;
}
And change your HTML to this:
<div class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top">...
Good luck!

Related

Wordpress site dropdown menu suddenly stopped working

I've tried searching the forums about this but I can't find something that works in my case.
I'm using elementor with Wordpress and Astra themes. For some reason suddenly the dropdown menu disappears fast when you try and click the menus. The dropdown menu also goes behind the pictures on some of the pages (not the front page). I have not edited anything about the menu and I have no idea how it happened.
Here it shows what I mean with the menu going behind the pictures
It does not do this on the front page.
The website is https://www.onebag.dk/
Does anybody know how I fix this?
The top elementor HTML element...
<div data-elementor-type="product-archive" data-elementor-id="589"
class="elementor elementor-589 elementor-location-archive product" data-
elementor-settings="[]">
... is positioned relatively but has no z-index set.
If you set the z-index below 9999 (the index of the submenu) it works. I think you can use this css in the custom css section of your theme:
div.elementor {
z-index: 99;
}
Maybe this is a bug in the theme, or it is a conflict between theme and a plugin.
I used this custom CSS to fix the problem:
#masthead {
z-index:99999
}
#content {
z-index: 0;
}
Basicly, made index of header higher than contents index and worked.

RTL bulma css navbar

I am trying to add the option for RTL users in my site. I am using bulma (V 0.5.2), most of it (the rtl) is working out of the box with a simple "style=direction:rtl" on the body tag. However, the navbar is acting funny. How can I make it work correctly with RTL?
This is what it looks like on desktop with rtl:
And on mobile it's like this:
Well, i have solved it by digging a bit in the code and understanding what should be changed in oreder for it to work properly as RTL navbar.
We have three main sections in the navbar, and i recommend making a class for it in you app.css or whatever name you have for your css called rtl-navbar and apply it on navbar-burger, navbar-end. on top of this, you should apply direction:rtl on the main navbar container.
.navbar-rtl{
margin-right: auto;
margin-left: 0;
}

How to override element.style in Wordpress navigation bar (menu)?

First of all, a link to my site: http://jakubplech.pl/.
You can see a grey, centered horizontal menu in there. If you look at it, you'll get:
<nav id="site-navigation" class="main-navigation position-default fixed" role="navigation" style="width: 1349px;">
I want nothing more that to change that width to auto, but it is an element.style of the theme and I have no idea how to refer to it (every change in custom CSS I did so far started with a dot). I read that i could use an !important trick, but since I don't know how to refer to it, it is impossible for me.
I'm dying to know the answer for this - if anyone could help me it would save me hours of frustration. Thanks in advance!
You should be able to use its class like so:
.main-navigation {
width: auto !important;
}

Preventing navbar from resizing on Bootstrap

I've been stuck for like 2h trying to prevent my navbar from resizing, as I built a webapp which I don't want to be responsive designed.
The navbar started stacking components and shrinking whenever the browser window was resized, so I tried different solutions I found with some googling and also here in stackoverflow. None of them worked for me:
https://stackoverflow.com/a/28415865/3736964
Temporarily Disable Responsiveness Bootstrap
https://stackoverflow.com/a/14151865/3736964
I even went to http://getbootstrap.com/customize and created my own bootstrap version by unchecking the "responsive utilities" and changing two LESS variables:
#grid-float-breakpoint = 0
#grid-float-breakpoint-max = 0
(I also tried 99999 and stuff for that breakpoint max value)
I downloaded it and tested with no luck.
I still wasn't able to prevent the navbar from resizing whenever the window was resized
So this isn't the way it should be done, for sure, but I couldn't figure out a cleaner and non-intrusive way of preventing the navbar from shrink.
I just added an inline style (you can do it also by overriding it on your .css files) for my nav element:
<nav class="class="navbar navbar-default" style="min-width: 1300px !important;">
...
</nav>
The !important aims for that style rule not being overriden. I've set the min-width according to my needs, so if anyone finds this useful, should change it for his particular needs.
<nav class="class="navbar navbar-default" style="min-width: 1300px!important;"></nav>
If you want to fix is and if you want to fix is at the top
use css
body {
min-height: 2000px;
padding-top: 70px;
}
and class navbar navbar-default navbar-fixed-top plus also if you want to fix it use min-width: 1300px !important; in the style tag
Thanks With Regards

Bootstrap 3 responsive classes change display property

When upgrading my project from Bootstrap 2.3 to Bootstrap 3.0 I noticed that adding a responsive class, e.g. hidden-sm to an element, changes its CSS display property to block.
To make things worse, the new display property is set as !important, making it difficult (or at least ugly) to overwrite by custom CSS rules.
For example, the code (view result here: http://jsfiddle.net/RZ95F/)
<h1>
Heading
<small>sub-Heading</small>
</h1>
gives a different result than the code (view result here: http://jsfiddle.net/vTuW8/)
<h1>
Heading
<small class="hidden-sm">sub-Heading</small>
</h1>
namely adding a line-break between the heading and the sub-heading.
Of course, this strange behavior also applies to much more complicated cases, making it very hard for me to upgrade my project without major markup and CSS changes just to compensate for this new Bootstrap behavior.
What did the Bootstrap team try to accomplish by changing the display behavior of those elements? And is there an easy workaround to restore the behavior known from Bootstrap 2.3 and earlier?
This is tracked on GitHub as #8869. A simple workaround shown there is to add a separate inline helper class:
.hidden-inline-xs {
display: inline !important;
}
#media (max-width: 767px) {
.hidden-inline-xs {
display: none !important;
}
}
Then you can just use
<h1>
Heading
<small class="hidden-inline-xs">sub-Heading</small>
</h1>

Resources