I'm new to everything and recently I made a website where I want to center align the main menu. I spent hours trying to find an option to do so but there isn't any.
The site address is: https://fleaprice.com/
I do not want anything about the top menu just the main menu. I want it center-aligned on bigger screens.
I checked all the theme options, read all the possible solutions listed here on this site and tried them all, almost all, but nothing seems to work.
Any help will be very much appreciated. I started my site in Wordpress because I read you do not need any coding knowledge, but now I realize you definitely need to have some knowledge.
Thanks a lot to everyone in advance.
Add this CSS to your theme's Custom CSS:
#media (min-width: 1000px) {
.main-nav.white_style {
text-align: center;
}
nav.top_menu ul li {
float: none;
}}
Related
I'm trying to figure out a way to make this work using CSS. I use wordpress and a theme so I can't really change much of the markup so I'm trying to solve this problem with CSS first.
I'm building a site with 3 columns article. It's working fine on desktop but when you start resizing. It goes like this.
What I want is that 'First post from Salon87 Brooklyn' should be next to 'Second Post' like this.
And this is what I want it to look like on desktop
Here's the code. http://www.salon87.nyc/news/
The problem with the HTML is that, there is an element fix added to the blocks. You need to hide it for mobile devices. Try changing 991px to your requirement.
CSS
#media (max-width: 991px) {
.fix {
display: none;
}
}
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;
}
new here and I'm crossing fingers for help.
I'm working on http://www.catgriz.com
On the frontpage I have a slideshow that stacks all of the information on top of itself when you initially visit the page. But after a simple browser refresh, it displays correctly.
I was hoping someone could look at it and point me in the right direction of what I've done wrong. I'm using Joomla with a Yootheme.
Thank you so much in advance!
Some sliders can produce flickering effect during page load, depending on the amount of elements in each slide, caching, internet speed etc.
You should hide all slides, except first one via css.
.slides > li {
display: none;
}
.slides > li:first-child {
display: list-item;
}
Widgetkit plugin will do the rest after page loads.
ps. Like the others, I actually didn't saw any problem on your site.
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;
}
Tried to get this going quite a bit, but so far no luck, but my css skills are still in the beginning stages.
I'm using bootstrap, and trying to have a simple logo at the top of my page with nav pills on the same horizontal line, but aligned to the bottom of the logo.
I've tried all the solutions that I could find about aligning content to the bottom of a div, but so far no luck.
What I currently have is in this jsfiddle: http://jsfiddle.net/UaujG/9/. Any help very much appreciated.
Thanks,
Simple fix is to add:
.span6 {
margin-top: 24px;
}
It works perfectly with a bit of jQuery
function sizing() {
var logoheight=$('#logo').height();
var navpadding=32;
$('#nav_buttons').css('padding-top', (logoheight-navpadding)+'px');
if(logoheight<navpadding){
$('#logo').css('padding-top', (navpadding-logoheight)+'px');
}
}
$(document).ready(sizing);
$(window).resize(sizing);
http://jsfiddle.net/baptme/UaujG/25/