Im trying to add my logo to my bootstrap 3 navigation. My goal is to achieve this:
MY NAV WITH LOGO
It shouldn't be centered and SHOULD be bigger than navigation panel (like in picture). I know that there are many soutions for those problems, but I've tried many of them and effect was poor.
Can anybody help me with this?
If it's necessary I can post any CSS or HTML code.
Thanks.
Edit: I did it, by using proper media queries nad manually positioned logo with margin.
Related
I’m attaching links of where my Navbar is now, and my intended layout in Illustrator. The problem that I am having is the logo to the left of the nav list is pushing the navbar to the right. I wanted someone’s opinion on the best way to approach this layout from a modern responsive point of view. The main image will eventually be an After Effects or Animate movie but I haven’t added any responsive code yet either. Should I put the header section into a 3 column grid container
Or use Flex like Nike
Using text align center on all Li parent elements, and changing the Z-Index of the header elements.
https://azteramaikoa.000webhostapp.com/
https://azteramaikoa.000webhostapp.com/images/amgridb.png
I need the navbar centered until about 768px wide, at which point the website will have to change because of the main image dimensions.
i am having trouble writing code for my top-nav
http://jsbin.com/evIhAkir/5/edit?html,css,output
i am trying to make social icons on my website horizontal in my nav bar but got stuck.
which is the best way to horizontal those icons.
http://jsbin.com/evIhAkir/6 i had been fixed your issue but please first improve your knowledge in html specially
difference between width in % and px
margin and padding
float:left and right and clear both..
hope you got the answer
Im using twitter bootstrap and really enjoy it as im not used to do webpages. Have a question though, i have a round logo and i would like to place it on top of a navbar - like shown on the image.
I can add an image inside the navbar, but as shown here i somehow want to put it on top of the navbar where as the logo will be larger than the navbar and look like on the picture.
Basically i would like to have a large circle (the logo) where the navbar will go through it in the middle with the logo on top.
can this be done ? thanks
edit : cant post pictures :(
Hard to say what you want exactly without having the image, but here is a guess:
Add the logo inside the block of your navbar and then, to your CSS file, set your image to have position: absolute and adjust the position by using, for instance, left and top.
Can anyone please help?
I am trying to do the following layout in HTML and CSS. This image is just a rough representation of the general layout for a website.
The top bar (or header) will be e.g. light grey and the sidebar 1 will be the same colour. The sidebar 1 also has a rounded bottom left corner and the sidebar 2 has a rounded top right hand corner. The effect I’m trying to recreate is that the header will “flow” into the sidebar 1 and that the sidebar 2 will “flow” into the footer.
So far I have the boxes coded so that it seems that they are touching and I also have the rounded corners done. But what Ive been stuck with for the whole day now is how to do the colours so that it seems that the 1 is flowing into the next one. Here is an example of what I have so far (still very rough as I am just trying to block out the shapes etc.) hansmoolman.com
The relevant section in the website above is the one called "This is the main container" which is about half way down the page and contains the sidebar 1 (the one with the Twitter feed) and sidebar 2 (the one with all the Lorenm Ipsum stuff). The top bar will be the one with the logo and navigation stuff. The footer is not yet implemented.
Can anyone suggest how I can do this? I am trying to stay away from a background image that will represent this as the sidebar 1 and 2 should be able to grow dynamically and independently of one another should more content be added.
Or can this done with a background image/images?
Can anyone please help as all the solutions I have been working on has become very messy with boxes inside and on top of other boxes. It does not look good code wise and I am concerned that it might not display as intended on all devices.
If more clarity or code is needed on this question just let me know and I can provide both.
Thanks in advance
*Edit - this is a possible solution as suggested by flem
Build your layot with divs like this (spacing just for visibility):
You will also need an element behind each of the rounded corners with the opposite colour. (You only need to do one of them if you set your body background colour.)
Im trying to make a layout that uses the whole screen so I have not set fixed widths on the layout. I'm using percentages.
im working on this http://www.abdhulzaman.co.uk/work/rima
as you can see at the top i have a logo and a header on the top left of the header and also a navigation thats position absolute to the right. now when i minimize the screen.. the nav and the logo header will overlap which is really annoying.
anything to do with position absolute/relative? This may seem very simple.. would appreciate then help! thnx :)
its something similer to http://jsfiddle.net/YFCWm/
Is the size of your navigation dynamic? If not, you could just set a min-width for your header (although it'd be better to set it in a container that wraps your entire site).
If you're just beginning with css and layouts, it can be a good idea to use a grid based framework like twitter bootstrap or blueprint css.
http://twitter.github.com/bootstrap/
http://blueprintcss.org/
Using one of those will make your layout problem trivial.
A quick fix to your problem would be to give the nav element a margin on the left side
margin: 0 0 0 230px;
That will prevent the nav from 'going' further left than 230px from the left edge of the header element.