I have a couple of problems with my nav bar. Basically I have 5 options on my nav bar, the first 3 are in text format, then last two are images that you can click on (a phone number and a live chat). Both are png files, and all items are within tags.
The problem I have though is that the images appear slightly above the nav bar. Basically if you ran a horizontal line along the text on the nav bar options then the text in the logo's is slightly above where it should be.
So how can I make the image navbar options appear slightly higher?
My 2nd Question is that one of the logo's also needs to have text appear over it (the phone number) and I have no idea how to do this. How do I put text over an image within a nav bar?
you can play around with css for your first problem, add something like the following to your css file:
.navbar img { padding-top:10px }
For the second question, have a look at tooltips
without jsfiddle, can't give exact answer..but you can try margin-left, margin-top and give minus values to it
Related
Hi I have some troubles while creating a navbar with a dropdown menu, I need all my informations in just one line, but my menu name and the arrow are not on the same.
A CSS element is created : .dropdown-toggle::after{display: inline-block;}
And my navbar looks like this :
I tried the most examples of dropdown/navbars I found on Bootstrap website but every time I have a result displayed in two lines. How can I fix that to have my label and my arrow in the same line?
Important Points:
If you need all your content in a single line then use white-space: nowrap; or reduce the font size.
as you mentioned you need the arrow in same line but its not due to less space in there, so use position absolute for the arrow.
After making it single line by white-space property you will need to create the ellipsis there so that your content will not look odd.
to make ellipsis: use overflow:hidden; on its parent and text-overflow:ellipsis on your text
My button is described like this
Link 1
Now I have another 4 similar buttons to place beside in a horizontal row besides.
Link 2
Link 3
Link 4
Link 5
I want position: fixed;, as I need those buttons to be on the navigation bar and always present relative to the browser window.
Because of the fixed attribute I can not have display:inline-block or display:inline;.
I did not want to copy the the button 5 times and each time just change the property of position. I thought I could have a general class which would specify what would be the height from the top of the page for the buttons, and then write in the horizontal shift using
<div style="right:10px;">
Link 2
</div>
This is does not work, any containers or attributes added to div can not affect the button position even though in it the right distance is not stated.
I know I can do it it by having multiple distinct classes in my CSS for buttons, but they would be exactly the same except for horizontal alignment and this seems like a wasteful way to go about doing so.
fix the navbar as a whole (and not the single nav items). In that fixed nav container you can use inline-blocks
I have a Flexbox based nav menu with a logo aligned in the horizontal center of inline links. Every pen or fiddle I tried making of this doesn't replicate what I'm getting for some reason, but you can go to this Flexbox test here which is almost exactly what I'm working from and if you go into an inspector and add an anchor to the main logo image you'll see what I mean.
The way this is set up is the third link has a left margin of auto applied to fill in the extra gap for the logo to fit in. The logo area is separate from the nav menu in the markup but flexbox layout puts them all in line with each other (at lower breakpoints the nav menu moves down).
Now this all works fine and good until you decide to make the logo a clickable link. When you do that, the margin from that third link obscures the hover state of the logo.
Here's a visual example:
So if you tried hovering over the logo where the margin area intersects it, you would not be able to click the logo, nor get a pointer cursor or any hover states (like a background change). Outside of the margin while over the logo, it works fine, but to a user, they're going to think something strange is going on. This happens if the logo is an img (as it is in the original example) or an SVG (as I'm trying to use).
Trying to see if there's a way around this without having to completely nuke my Flexbox layout. My markup is very similar to what is being used in that example. I've tried toying with a higher z-index for the logo compared to the nav, which didn't work. Giving the nav a negative z-index lets you click the logo but then you can't click the nav items.
You can add a relative position to the logo and then play around with the z-index to make the logo the first element.
.logo {
position: relative;
z-index: 1;
}
I would like to be able to have a logo overhang from a header, see this link for a visual example. From what I've searched, most of the results are about making this happen with WordPress rather than just in terms of HTML/CSS (including the provided link). I'm using RoR alongside Twitter Bootstrap in order to create some quick styling of the page including the header (possibly pertinent information).
I'm guessing the answer to this question really is HTML/CSS-centric, so, if I had a header <div> that included a logo to the left as well as a set of navigation links to the right, how could I go about making that logo overhang into the rest of the page below?
Also, bonus points if the ability to add a slight shadow to the part that overhangs is included :)
You can use the z-index property (CSS) to set your logo image so that it is always in front, then you can position the image in your header and it will look like it's hanging. The slight shadow should be part of the image itself.
Try using css code with
position: absolute;
This will ensure your logo floats on top of wherever you want it. Then adjust how you want to place your logo image with:
margin-top: 100px;
using whatever px you want.
I have some page navigation buttons + a dropdown box that I'm trying to display side-by-side but they are not cooperating with each other.
Both items are to float right. Fiddle: http://jsfiddle.net/u9dBm/1/
What's wrong:
the red cross is what is happening now
the red cross and green tick is what should be like but you'll notice that the dropdown is one pixel short on the top when by iteself away from the pages they are the same height...
green tick is what it should be like
Why are the two object playing silly buggers with their height?
Unrelated to the problem, but something I'm curious about... Why when I put the SPAN containing the dropdown AFTER the pages one, it displays to the left? Logically (or mine at least), since it is in code AFTER it and not before, it should display afterwards?
I wouldn't use float at all for this. I made some changes to your code, let me know what you think: http://jsfiddle.net/Wexcode/g2Z5k/
I messed around with some relative positioning, and I got this:
http://jsfiddle.net/u9dBm/6/
I added
position: relative;
top: -6px;
to the end of .dropdown > li to make it appear 6 pixels higher than it's supposed to. I can't tell you why it was rendering down there in the first place, but I can give you a crappy fix.
BTW, I really liked the demo.