This is my website: here.
My menu on mobile is not showing for some reasons. I know it's hidden probably, but I can't figure it out how to fix it.
I'm using bootstrap framework.
In your site CSS file http://www.florin-pop.com/work/Simple%20Eats/css/style.css ".navbar" class has set to height:70px, causing dropdown to hide.
Changing height:70px to min-height:70px will make drop-down appear.
or add below code inside media query #media screen and (max-width: 768px) {}
.navbar {
height: auto;
margin: -11px 0 0;
min-height: 70px;
}
I just edited the bs-example-navbar-collapse-1 element css properties of your menu to the following:
z-index: 9999;
position:absolute;
background:#FFF;
and the menu is displayed.
There is no z-index on your "navbar-collapse collapse in" and also no background.
so add the following
position:relative;
z-index: 9999;
background-color: #fff;
Related
Hi I'm still new to web development. So I have a register page that floats as a div above the main page but I was wondering how do I ensure that the div gets centered in a responsive manner?
The pages are separated and included at the header.
<?php
include ('includes/login.php');
include ('includes/register.php');
?>
my register's css
#regScreen {
padding: 5 5 40px 5px;
margin: 0 auto;
position: fixed;
top: 5%;
left: 33%;
z-index: 10;
display: none;
background: #ebebeb;
}
#regScreen:target, #regScreen:target+#cover {
display: block;
opacity: 2;
}
#reghead {
background-color: #e2e1e1;
text-align: center;
display: block;
padding: 0px 0px 10px 0px;
}
I tried to use media query on my #regscreen:
#media (max-width: 300px) {
#regScreen {width: 100%;
left:0%;
}
}
But using media queries doesn't seems to recognize the page as responsive as it is already small. From my understanding, please correct me if I'm wrong.
It's difficult to provide an exact answer without more infomation (it would be great if you added more of the HTML markup), however...
If the issue is that the floating div does not resize to fit various screen sizes (and since you're new to web development...welcome aboard!), there are a couple of suggestions I can make:
1) You may be overcomplicating it by trying to apply the #media (max-width:300px) media query. By simply adding the following styles, the registration form should resize accurately:
#regScreen {
/* The rest of your styles go here */
width:90%;
max-width:600px; /* em or rem value would be better than px... e.g. 37.5 em */
}
This would ensure that the width of the form is always either 90% of the screen width OR 600px, whichever is smaller.
2) If you think there may be an issue with the media query not trigerring, an easy way to test it is to make something really obvious happen at that breakpoint...for example:
#media (max-width: 300px) {
/* Test Style */
/* Turn background red when below 300px */
body{
background-color:red !important;
}
/* Your original styles */
#regScreen {
width: 100%;
left:0%;
}
}
By doing this, it should allow you to start troubleshooting whether it's your media query syntax or something else that is the issue; maybe the media query styles are being correctly applied (so your media query syntax is ok) but the new styles are being overwritten later in the CSS (or due to the specificity of certain rules).
If you add more info to your question, let me know and I'll take another look but until then, this should hopefully help get you on the right track.
I'm not sure about what is the element using those selectors, but I tried to make a sample html & css reference for solving your issue. Here is the link jsfiddle.net/3Le34w8p/
i already see one error just by looking
#media and (max-width: 300px) {
#regScreen {
width: 100%;
left:0%;
}
}
you for got 'and' before '(max-width: 300px)'
How to open bootstrap-dropdown when i click on cell within ng-grid ?
I can open it only partially.
Here's plunker
I think you need to add this to your CSS:
.ngCell {
overflow: visible;
}
which allows the ngCell to display the drop down like you want. The issue that I'm having is getting the drop down on a lower cell to appear over the ngGrid footer rather than increasing the size of the scroll bar.
This CSS worked for me so something in this direction will hopefully work for you
.dropdown-menu {
position: fixed;
display: block;
margin: 22px;
top: auto;
left: 0px;
padding: 0px;
I am trying to change size Page titles. But I am not able change it.
I have found CSS for nav bar in custom.css as below:
#navigation {
position: relative;
z-index: 3;
li {
border: solid #E2E3E3;
border-width: 0 1px;
display: none;
/* WIDTH:33.333%; */
&:first-child {
border-left-width: 0;
}
}
}
Although, width is commented or removed from li, I am seeing width of nav bar 33.333% only.
What is that I am missing? Can someone help me?
Thanks for your help!
Here is how my page's nav bar look alike:
Liferay's welcome theme come with sas compilation. Inside compiled CSS, you need to change properties of CSS and then those will be accepted as final values.
This question already has answers here:
CSS 3 slide-in from left transition
(6 answers)
Closed 8 years ago.
Please find this jsfiddle jsfiddle . When the screen size is less than 600px, the top menu bar is converted into responsive menu. When user hovers on "Menu" text (this text is used only for the demo), the menu appears. This works well on desktop and smartphones. Now I tried to implement slide right transition when user clicks on "Menu" text. I modified below css class
.nav ul:hover li{
display: block;
margin: 5px 0 0 0;
}
and add transition property. But it didn't work.
How do I make slide right responsive menu from css ???
This is not how i'd do it. You've to consider altering your HTML and CSS.
for example, the word menu is simply written in HTML, which is semantically incorrect and becomes a blocker while trying to animate the element, because you've to keep the text visible and deal with the rest of <li>, meaning this prevents you from being able to easily animate the <ul> altogether upon hovering menu. IMHO Menu should be a separate element.
However, to help you out with your current HTML and css, you can try something like this
.nav ul {
padding: 20px 0;
position: absolute;
top: 0;
left: 0;
background: url(../images/icon-menu.png) no-repeat 10px 11px;
width: 74px;
background-color: #5B9BD5;
z-index: 1000;
height:0px;
-webkit-transition:all 1s;
}
.nav li {
-webkit-transition:-webkit-transform 1s;
-webkit-transform:translate(-100%);
/* hide all <li> items*/
transform:translate(-100%);
margin: 0;
width:75px;
}
.nav ul:hover {
height:auto;
}
.nav ul:hover li {
display: block;
margin: 5px 0 0 0;
-webkit-transform:translate(0%);
transform:translate(0%);
}
JSFiddle
side note: above works in webkit browsers and latest browsers that doesn't require prefix for css3 transitions. remember to specify other browser prefixes to make it work cross browser
I have implemented the following website: link
There are two textfields in the header part of the website. If you click on a textfield, a calender pops up. My problem is that the calender is not shown on the foreground although I set the css properties position: absolute; and z-index: 999;. What is the problem and how can I solve it?
You can add the following to your css
.row-3 {
overflow: visible;
}
Just remove overflow:hidden; from here #header .row-3
#header .row-3 {
background: url("images/header-tail.gif") repeat-x scroll left top transparent;
height: 276px;
}
see the attached image how i did