Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #23013

    Hi guys,

    1. I was wondering if it’s possible to make the navigation justify to the right if I’m using the “Header with social icons bottom navigation” ?

    2. Is there a way to make to modify the CSS so it’s a header fixed with this Header style?

    3. How can I make the social icons a couple of px bigger?. Is there an easy code I can insert the social icons into the footer as well?

    Thank you!!

    #118239

    Hi,

    1.) You can use this

    #top .main_menu .menu li {
    float: right;
    }

    2.) To make the header fixed, you use this

    #header {
    position: fixed;
    }

    #main {
    padding-top: 155px;
    }

    3.) You increase the icon size with this

    .social_bookmarks .avia-font-entypo-fontello {
    font-size: 16px;
    }

    Regards,

    Ismael

    #118240

    That’s very helpful Ismael. THANK YOU!!! Couldn’t figure that stuff out.

    By any chance do you if it’s possible to make the light gray lines between menu items shrink to approximately the height of the text?

    here’s an example of what I’m talking about: http://cl.ly/image/0Z2I2W442q2b

    Thank you again!

    – John

    #118241
    #118242

    Hi Nick,

    WHoops, here you go: http://cl.ly/OtYk

    Thanks,

    John

    #118243

    Hi,

    You always find the not so easy ones, lol.

    Well, its possible of course, but would require the menu to be changed in multiple ways. Right now the css below controls those vertical lines and as you can see its a border.

    I added the very last one border-image, and you can see how it looks so without having to rebuild the menu, I think something like this would be the best solution, so you would need to create an image of a border and then plug it in there. Obviously the image i am using is not going to work out well. You can see for yourself though. http://www.clipular.com/c?5895319=Qkr65KYgSXgHdJ3pSJKi-_W2TIY&f=.png

    Don’t mind for now that it affects the sub menus, the css can be targeted better, but first need that border image.

    /*only the vertical line for very first menu item*/
    #top .main_menu ul:first-child>li:first-child a {
    border-left-style: solid;
    border-left-width: 1px;
    border-color: rgb(225, 225, 225);
    }
    #top .main_menu ul:first-child>li a {
    border-right-style: solid;
    border-right-width: 1px;
    border-color: rgb(225, 225, 225);
    /*
    */
    -moz-border-image: url(https://www.w3.org/TR/css3-background/border.png) 1 6 56 27 stretch;
    -webkit-border-image: url(https://www.w3.org/TR/css3-background/border.png) 1 6 56 27 stretch;
    -o-border-image: url(https://www.w3.org/TR/css3-background/border.png) 1 6 56 27 stretch;
    border-image: url(https://www.w3.org/TR/css3-background/border.png) 1 6 56 27 stretch;
    /*
    */
    }

    Of course if you want to try on for size something easier, like changing ”solid” style to dashed, or dotted. Otherwise border image is the way to go, There are a number of generators that can help you along, once you have your image ready. like this one http://border-image.com/

    Thanks,

    Nick

    #118244

    Nick,

    Thank you very much. That’s an interesting approach. You went well above duty on that one. I didn’t realize it was so difficult to adjust. I thought it was just the height of the padding and right frame set to 1 px. I’ll dive deeper and try and find something that looks great using a border image using your suggestions.

    If you can think of any other tough questions I should ask, just let me know :)

    Cheers,

    – John

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Possible to right justify the menu when it's below the logo?’ is closed to new replies.