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/
Related
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;
}}
I'm having trouble keeping text tagged with class="navbar-text" in line with other links in the navbar. Building off of the Bootstrap 3 example for a fixed top navbar, I noticed that any time the browser width is <768 pixels, the collapsible menu items shows the text without the proper spacing and butted up against the first link in the menu:
(http://www.bootply.com/98784)
The text "Business Infrastructure Services" is a <p> tagged with class="navbar-text" as recommended for text strings in navbars. It looks fine when it is not collapsed (browser width >768 pixels). And, when I try to tag the text as an <a>, the styling is fine and everything looks good. But, it's not meant to be a link, but rather a simple string of text. I've also tried moving the <p> out of the <ul>, but it still shows up weird. Any suggestions on how to resolve this would be greatly appreciated. Thanks!
Edit 12/5/13: I apologize if I was unclear in what I was trying to achieve. Basically, I'd like the <p class="navbar-text"> to appear on its own line, just like the other links in the <ul>, like this:
Edit 12/6/13: Since the release of Bootstrap v. 3.0.3, this issue is partially resolved. The text string now appears on its own line, but doesn't have the proper indentation (See https://github.com/twbs/bootstrap/issues/11735):
I'm not really sure why you're having trouble with Bootstrap's layout, but you just need to get the two types of elements' styles synchronized at mobile sizes:
Demo
#media (max-width: 767px) {
p.navbar-text {
margin: 0;
padding: 10px 15px;
}
.navbar li {
overflow: hidden;
}
}
Update: The original fiddles were lost, so I've attempted to recreate them. In response to the OP's comment about Bootstrap v3.0.3, the overflow statement can be eliminated.
Demo 2
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;
}
In the showcase example for http://fractalsoft.net/primeext-showcase-mojarra/sections/layout/tabbedLayout.jsf
tabs are centered right, I can't figure out how to do it.
I've tried searching and applying ui-tabs styling and I can change size easily but not the tab alignment.
For example this did not work: jQuery UI tabs aligned and sharing bar with a title
This seems to be the relevant css http://code.google.com/p/primefaces-extensions/source/browse/primefaces-extensions/trunk/src/main/resources/META-INF/resources/primefaces-extensions/layout/layout.css?r=1201
and pe-layout-tabbuttons is indeed present when I firebug the code but I can't figure out what to change.
I basically want this:
_________________|tab1|tab2|tab3|
instead of:
|tab1|tab2|tab3|_________________
cheers
It seems that this CSS does the magic:
.pe-layout-tabbuttons {
left: auto !important;
}
To see how to use CSS in JSF see here.
I have this page: http://www.problemio.com which has a black bar on top which has search and a dropdown menu. That looks reasonably ok.
But then I have another page like this: http://www.problemio.com/category.php?category_id=1 which has those two elements, but for some reason, the search appears on the top left of the bar.
How can I make these elements appear as they do on the home page of problemio.com ?
Thanks!
You have it absolutely positioned over your search box. Fix the absolute positioning and you should be fine.
you don't have you main_styles.css on the interior page, which has this style in it:
#search {
float: right;
margin-top: 7px;
width: 14em;
}
In your page which displays the search box as you desire [problemio.com] the div has the css value 'float: right'. This is the value you need on the other page.
div#search {
float: right
}
I just answered this in the comments of your other question, posted 5 min ago.
Your problem is that the home page div with class nav takes values from main_index.css and the other page takes values from main.css.
There are some inconsistencies between the two which might lead to the problem. Firebug or devtools will help you debug these kind of problems.