Im developing a site using Wordpress and id like to move the social network icons to the bottom of the page (icons are over at the top of the left hand panel)
http://www.chessfusco.com/flowers/
Ive dug around on this site and tried some of the things people have suggested in relation to sticking a footer at the bottom of the page etc but i just cant seem to get it to work!
Would anyone mine giving me a hand?
Yous
Chess
Just add this in your markup
<div class="dock-panel-wrap" style="position: fixed; bottom: 0;">
See
Add the following to this class:
.dock-panel-wrap {
padding: 0 20px;
position: absolute;/*Add position absolute*/
bottom: 0;/*Add bottom at 0*/
width: 100%;/*Set width to 100%*/
}
It's hard to know for sure without knowing what theme you use. A good start would be to check 'Appearance' > 'Widgets'. With any luck, the social icons will be a widget, that you can simply move to the footer 'sidebar'
Edit:
I can see that you're using the 'epix' theme. Your first place to ask would be the support forum - http://help.themeva.com/?envato_item_id=5783556. After all you've paid for the theme, you're entitled to some support.
In ul.dock-panel class replace
position:relative;
with
position:absolute;
bottom:0px;
Related
I am trying to reposition the entire block of navigation section in a different position than it is right now, e.g. moving it a little upward as it is shown in the attachment.
I have tried to modify the CSS file under ..porto/web/css/header/type2.css with the class .nav-sections. I have tested with other possible CSS classes and after so many attempts I haven't found it working; now I am looking for help. Can anyone please give me any hint on this issue? I am using porto theme with my site.
Ideally you would want to edit the .xml file from the correct module within your own frontend theme. But if your specifically looking to just edit the css the below might work:
.page-header.type2.header-newskin .nav-sections {
text-align: center;
position: absolute;
top: 70px;
left: 35%;
}
you can just tweak the top and left positions to your needs.
I'm busy setting up a Shopify store and would like to do the following
I would like to move the menu that is currently on the right to the middle and put the logo above the menu. I have looked around and can't find anything that works.
Example of what I want it to look like
I would also like to make the menu items sticky on scroll...
Can someone please advise me how I could go this with the Brooklyn theme?
Thanks in Advance
Follow below:
Go to Online Store->Theme->Edit code
Asset->theme.scss->paste bellow code in bottom of file
.site-header{
position: fixed;
z-index: 1;
top: 0;
width: 100%
}
I'm having some issues in trying to fix a site that was built by some one else. Seems the previous developer some how used BootStrap which I'm not an expert. When checking the code I can see that there is a reference for a #footer class, but cannot find the exact problem. The problem is ... there are few Social Media icons, on the regular site they are click-able and working fine, but when you resize the site for responsive the images are there but the links disappear or not working ...
Any idea how to fix this problem ?
The site link is at : http://tie.com.sa/index.html
Thanks in advance ...
Fawaz
You can add some "priority" to the elements using position: relative and z-index.
The description of the footer is overlapping the icons.
Just add the properties and values as shown below into #footer ul:
#footer ul {
position: relative;
z-index: 9999;
}
I am using Google Blogger. I just changed template of my blog and choose a new one. But there is a problem with this one. My logo is not fully showing.
My website: www.pkgeek.com
The K of the logo is missing. I tried to find the code for the logo, but didn't find. I think the author haven't typed specific code for the logo.
I think the blogger it self is doing some customization.
How can i fix this ?
Your div is way too small for you Logo :).
Just go in your css file and paste this code.
'#header { width: 30%; }'
I put 30% in case you need to add some things on the right of your logo, if not, just put 100% it goes well.
Good luck ;)
#header needs to be set to width: 267px instead of 220px in your css
Listen; I have read and read but couldn't find an answer that fit my problem.
I'm using Fancy Box on my website http://www.houdi.se/video.shtml but have the problem that the Fancy Box appears UNDER the menu when a video-link is clicked (its Responsive).
Viewed in a browser there's no problem since it fill up. BUT when narrowing the browser the menu problem arises. Also viewing the top video in an iPad.
I'm using Adaption-plugin from ProjectSeven for the website. It's a Responsive CSS layout: http://projectseven.com/products/templates/pagepacks/adaptations/index.htm
That plugin also uses Project Seven's Pop Menu Magic 2 for the menu.
I'm not a code wizard but I have tried to increase z-index but it didn't work OR I have not increased the rift one?
Have now spent several hours working with this problem and happy for all help I can get. Just tell me what code you want to see (or have to see).
Remove z-index from this div containing the menu:
<div id="p7PMM_1" class="p7PMMh19" style="position: relative; z-index: 999999;">
The reason that the menu is on top of fancybox is because you're including the script 7PMMscrips.js on the page which manipulates the z-index and position properties of the main menu.
An ease way of solving this would be to just add the following css to your main css file:
#p7PMM_1 {
position: static !important.
}
That would solve the issue but i would not recommend it as using !important is a really bad practice. You can read more about why here: What are the implications of using "!important" in CSS?.
If i where you I would look into removing this script and create the main nav with just pure css instead.
Im no expert but looking at your css file for the navigation bar you don't have any z-index so you could try adding it.
your fancy box css file has several and the lowest is z-index: 8010; so setting you navigation to below that should resolve it.
Try using this code:
.navigation {
background-color: #000000;
background-image: url(images/chameleon.jpg);
background-repeat: no-repeat;
background-position: 0px -60px;
position: relative;
z-index: 90;
}