I don't know if this is possible, or if it is, then I'm very dumb.
So I'm using bootstrap 4 to make my wordpress theme. I would like to make the menu to never expand so it always showing the hamburger icon. Now, when the user click it, I'd like it to filled the entire screen like in this website www.tomango.co.uk.
I tried setting the width to 100%, nothing happens. Changing it to a set px also change the toggle button icon.
If you know how to do this, please help me.
This is what you need, please follow this...Just click on slide down, same as your requirement
https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
Related
does someone know how I can make my dropdown navbar responsive.
It's hard to explain what I mean, but you notice it if you check it out. Please resize you browser to notice it.
If you make your browser smaller you see:
HOME(active), discography & special, I only wish to see the ACTIVE left.
If you open the menu. You see "HIDEKI solo" next to discography.
But I want "HIDEKI solo" below discography. Same goes for SPECIAL!!! & Movie.
https://codepen.io/Nagashiwa/pen/xxRWwzO
Thank you!
My blog is https://www.firozemistry.com based on the Blogger SOHO theme (with custom domain).
On smaller screens like Mobile or iPad, the Hamburger menu appears on top left in the Header. On large Desktop/Laptop screens the Hamburger menu disappears and, instead, the open Sidebar appears on the left side of the screen (instead of the Hamburger menu).
I would like the Hamburger menu to always show on large Desktop/Laptop screens. I do not want the sidebar to show, and instead would like the sidebar items to show only when the Hamburger menu is clicked on.
I would be grateful if someone would show me how to achieve this, either via CSS, or by modifying the HTML. Thank you.
I have found the answer, it is quite simple. In Blogger editor, go to Theme > Customise > Advanced > Widths and set the Content Margin value to 600.(default value is 117). Now even on the largest screens the Sidebar will not appear unless the Hamburger icon is clicked on.
By editing some css you can make this change.
At first remove this css.
Remove media query on this class and make it global like the image
Remove this mark down class
Hope it will work.
Based on 1st response - if you cant get to the Width option from the Customization page - edit the html as follows:
FROM:
<Variable name="content.margin" description="Content margin" type="length" min="0px" max="1000px" default="117px" value="117px"/>
TO:
<Variable name="content.margin" description="Content margin" type="length" min="0px" max="1000px" default="117px" value="600px"/>
I got one really annoying bug, that I couldn't find an answer for. I have a menu slider that has a drop-down menu attached to each item. The slider itself is custom made, but the drop-downs functionality is provided by UI-Bootstrap.
Here is a simple fiddle, that I've made to get more about the problem:
https://jsfiddle.net/Lus92rqm/7/
If you can see in the CSS tab, I've added some comments about where I think the problem comes from and a possible solution that I ran into. So basically, all the thing is not working because of the overflow: hidden style attached to the .menu-slider-wrapper. I needed it though, because I want to hide all the items that are not in the visible area - the 570px width of this container.
I also tried to add position: fixed to the .dropdown-menu class and thought it was working perfectly, until I tried to scroll the page down... The shown menu is scrolling with the page which is not the behavior I'm searching for.
One more thing is that I definitely need a position: relative attached to .menu-slider class, because in that way I can move the slider from left to right and opposite - changing the left property of it.
Sooo, anyone with any ideas how I can manage to workout this thing?
Thanks! :)
You need to use dropdown-append-to-body, see the example on the docs page.
I have a dropdownlist which is given in the image. I want a cool circle button to open the dropdown & secondly i need the dropdown that gets open after we click the button to be a little bit smaller in Width or maybe i want to redesign it. Is it possible by CSS. Every kind of suggestions are welcome.
Using CSS, put the width of dropdown box as imageWidth - 2*(imageBorderRadius).
You can calculate this width easily as you will be knowing the width and border radius given to the image.
I have a navbar with a user dropdown menu aligned right. When the user has a picture added, I would like to show a small thumbnail next to the users name. This is already done, however I think it is implemented in a flawed way.
When the viewport size shrinks, the image (as it is now) is put on the collapsed list of menu items at the bottom - which shouldn't happen. It should either disappear or stay with the users name.
Also I would like to have the picture clickable and 'grouped' with the user name.
I have made a test navbar of my code here:
https://nkhs.dk/navbar/navbar.html
Can you suggest a change to make this happen?
Regards, Niels.
It should either disappear or stay with the users name.
To disappear it use the .hidden-* class.
e.g if you want to disappear this image on widths <768px, you would use class .hidden-xs.
For more: http://getbootstrap.com/css/#responsive-utilities-classes