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
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.
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.
I have been designed a web site which top menu has fixed position
every thing is Okay, the site is not responsive. but in mobile the top menu stick to left,but it must be at center.
please help me, what can I do??
the website : http://www.infinitypub.com/
Remove both width and max-width from the body element. I suspect you're trying to center the page, but you're doing it in an incorrect way.
I recently downloaded Flexslider and managed to extend the images, and I have two things I need help with. The first thing is that I want the slider to be full width, and apparently it is being blocked from that in .container by overflow:hidden. If I remove that piece of code, everything expands and the website doesn't look right, but it removes the space between the slider and the screen. Does anyone know how I can fix that?
And my second question is how I make a small space between the slider images. Here is an example of how I want it: Example
Here are my codes:
jsfiddle
Adding margin:0px; on the body fixes the problem.
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.