Demo of slide menu in the top left of the page:
https://cuppalabs.github.io/cuppa-ng2-slidemenu/
Using the Google Tools I have been able to change the margin-top of the menu, but I've had no luck doing the same with my own copy.
My best attempt:
cuppa-slide-menu span div .menu-container .cuppa-menu .show-menu,
cuppa-slide-menu span div .menu-container .cuppa-menu .hide-menu {
margin-top: 134px !important;
}
I have also been unable to locate the css file located at src="/path/to/angularjs/angular.min.js"
Regarding the icon sizes, I was unable to do it even on Google Chrome.
Any advice would be much appreciated.
There is not a css file as such, the styles are included in the js files, I have been able to change the margin of the menu by writing the following in my stylesheet:
.cuppa-menu-overlay, .menu-container[_ngcontent-c3]{
margin-top: 150px !important;
}
And the result is
I hope I have helped, greetings
Related
this is my site http://www.noor-azmi.com/element/index.html
There is a white space between the navbar and the carousel below
I already tried the
.navbar { margin-bottom: 0; }
but it does not work. It only worked when i changed the carousel to a normal img image.
<div class="banner" img src="....">
pls help thanks
2nd issuei am also facing with my site is when in firefox, when i click to another page "Home" "Company" & "Contact", the browser will auto scroll down and will show the page below the navbar.
In your .fullslider class you have margin-top: 40px;
It'll look like you want it once you remove it.
Please add following css to your style file it will fix your issue
.fullslider {
margin-top: 0px !important;
}
thanks i solved the first issue.
How about the 2nd one. The weird scrolling in firefox, the website will automatically scroll below the nav
Website: www.tarbooshla.com
When viewed on a mobile device, the search icon is not aligned with the rest of the navbar (the logo and the menu icon). How can I fix this?
I have tried updating all the themes and plugins to no avail.
It seems to be displaying exactly as intended with the current rule set. I'm assuming you want it to populate on the right? I was able to move it substantially with the padding property, however I don't think that's the best scenario for you. The search icon is currently not text at all, but a pseudo element displayed in an ::before scenario, if you want it to show up after when it reaches a certain size, I recommend having a media query that sets it to display:none; and an ::after pseudo element that displays when it gets to your smart phone #media and screen (max-width) size.
It is happening because of the limited space in mobile devices.So what you can do is go inside the header.php and put the search bar inside the main navigation bar along with home,about us, etc so search will appear once the user press menu button.or with the help of css,align the menu to the left so that search button can fit into the right.
This code may help you. Make sure to add this CSS code at a place so that it loads after all other css is loaded ( therefore taking maximum priority )
#media only screen and (max-width: 767px) {
#Top_bar .logo {
text-align: left;
}
#Top_bar .top_bar_left {
float: left;
width: 80% !important;
margin-top: 10px;
background: none !important;
}
.header-classic #Top_bar .top_bar_right {
top: 15px;
float: right;
}
}
I am using bootstrap and I would like to display an image, followed by some text. However, no matter what I do, the text gets bumped to the next line, even though there is plenty of room after the image. Here is the code:
<div class="splash">
<h1><img src="logo.png" style="width:120%;height:auto" class="gold"><small>text</small></h1>
</div>
I thought images were supposed to be inline by default, but just in case I added this class in my css sheet:
.gold {
display: inline;
}
Can anyone explain why this is not working?
Your problem is with the width that you manually set to 120% with inline CSS. It's taking more than the full width (100%), there's no room remaining so the text is bumped to the next line.
If you remove that piece of code or change it to something smaller, it will work as expected.
Example : https://jsbin.com/quyogodawa/edit?html,output
When I had these issues I would always go into the Dev Tools in the browser. You can then go to the CSS tab, select the area of your page and it will show you all the styles being applied to that section.
You can tweak each style, add/remove on the fly, and see it change on your screen to figure out why it's not doing what you thought it should.
Each browser has it's own dev tools, and you access them by pressing F12.
Try changing your width and height values:
.gold {
display: inline;
width: auto;
height: 100%;
}
I think the fact that you're setting width to be 120% is forcing the small text to take a new line
Appears to be issues with my own .splash class, things work normally when I remove it. Not really sure why it would cause an issue though:
.splash {
font-family: Ubuntu, sans-serif;
margin-bottom: 20px;
}
This should be simple, but I can't figure it out:
Here is the site:
I want the logo at the top to be brought down by 20px. I'm using chrome and trying to mod the CSS in the developer tool to figure out what is keeping it stuck to the top, but haven't figured it out yet. I thought the obvious answer would be to increase the padding-top, but nothing moves when I add that in.
Played around with your code. Padding-top works, but on the div that contains your image - class="head-wrap". Just add padding-top:20px; to that element. It worked in developer console for me. Better than adding a margin to the <header> element as you won't reveal the body color.
full css you should be able to use
.head-wrap{
padding-top: 20px;
}
in the site-header add margin-top:20px; The css would be:
.site-header {
background: url(http://www.therunexperience.com/blog/wp-content/uploads/2014/02/TRESimpleWhite_small4.png) no-repeat !important;
margin-top: 20px;
}
EDIT:
Or for padding add:
.head-wrap
{
padding-top: 20px;
}
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions