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
Related
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
Introduction to clearify the task
I have a Navbar on the left side of my page. It has two levels for Items. When it's displayed in a small device, only the icons of the first level are shown. If you hover over it a dropdown of sub-items wil be shown on the right side of the bar. So far so good.
When the user uses a normal device the first-level-items should be displayed as dropdown-headers and the sub-items should expand under their parent-items on click. So I planned to set the sub-items-container under the main-items with height: 0px; and exband it with javascript-onclick and a css transition.
But as you can see the sub-items are hovering over the main item.
Question
How can i ensure that the subitemlist is between the main-items and not over it?
Additionally the solution shouldn't destroy the responsivness.
Note: I really want to make my own navbar, so using Bootstrap is not an option. Also i'm sorry if the code is not the best, it's the first try.
Code
I have put the whole thing in a jsfiddle
you cant put it in sidebaritem you have to put it below it
I am working to convert a site to a completely new theme in Wordpress. The original site is here:
Original
The new dev site is here:
Dev site
What I am trying to do is make the menu match as closely as possible to the original site. I am fairly intermediate on CSS so I have the following questions:
How can I make the sub-menu text left align with the parent menu text?
How can I get that pointer to point at the parent menu?
Please note that I am using a plugin called Max Mega Menu for the dev site.
Max Mega Menu includes a location to add custom styling. There is an example at their site:
Max Mega Menu Styling Example
You need two things to achieve sub-menu like in selier.com.
First, you create an empty div which will appear on parent menu hover, and which will have width of 100%. This div will be your semi-transparent background.
Then, for each sub-menu you create, set its background to none, limit its width to some value, and set its position property to absolute.
Also, make sure that the sub-menu shows on top of the background div.
This should do it.
It will be better not to use any plugin and used the custom html menu to get the exact menu like in the demo.
Unfortunately the title I have given is very vague. I honestly wasn't sure how to word it. Anyway, basically I currently have a vertical navbar with a small caret beside the text. Once clicked, the particular button uncollapses and shows it's contents.
As seen in the image above, I'm attempting to have a secondary caret that should be sitting on the right of the button. This caret will follow suit on every other button once I get it working. Anyway, I'm currently using twitter-bootstrap and from what I understand, I could be able to split the button into 2, each having their own function. For example, if one were to click the text and the downwards caret, it should uncollapse the menu (Which it does fine right now). Though, when you click the right facing caret, it should just bring you to another page via an href or something. Currently, clicking either button will collapse and uncollapse the menu.
As you can see, the right facing caret separates itself from the original button but in a weird way. On the far right of the image is an example of the button separation I would like. In the Twitter-Bootstrap example, the "button" text and the caret both do different functions. I'm not entirely sure on how to achieve this via the current button setup I have. I'm quite happy with how the current buttons look visually but I want to be able to add that secondary caret that is justified to the right of the button. As well as have that secondary button separate nicely, similar to that of the Twitter-Bootstrap example.
TL;DR: how do I get a button to split into 2 piece via the current HTML that I have. I would like to keep the styling and I would like each button to have it's own functionality.
(Enlarge image)
http://i.imgur.com/Xm7ILoq.png
Just make two buttons and style them to be close to one another. Use CSS styling to get it done. You can lower the margins on the sides to get them closer, you could use border-radius to get rid of the corners in the middle, etc etc.
Just figure out how you want it to look. And forget about splitting buttons, that is not something you can technically do, or should want. Create 2 buttons and style them.
I'm using jquery mobile for a project which has a list-view and list-divider in it. I would like to make it so the list dividers stop scrolling when they get to the top of the page, and then keep scrolling again when another list divider bumps into it. For an example of what I mean, check out the iphone "contact's" app. Each letter (which is a list divider) stays at the top of the screen while you are still scrolling through contacts within that letter.
I've tried fixing the position but that obviously is not quite what I want. Is there a way to fix it only when it is at the top of the page? and then "un-fix" it as soon as a different list divider comes up below it?
The jQuery ScrollToFixed plugin is exactly what you are looking for. The examples will show you how to use the plugin.
Based on your description, I would say that the easiest way to accomplish this is to give each list divider a z-index greater than the one it overrides. That way you do not have to deal with minimum and maximum offsets, instead the overriding element will simply be layered on top of the previous one.