Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 17, 2014 at 8:34 pm #225063
    jmikhail

    Hi Guys,

    See my website: http://bit.ly/M6McR3

    I have a few questions I need to add styling to my quick css:

    1) How do I adjust my logo positioning, I’d like the bottom of the body to sit on top of the navigation bar and probably move the logo further to the left as well.

    2) How do I set up the navigation so when I click on an active page it changes the color of the background and makes it look like a rectangle, for example click on one of the pages at http://www.apple.com and you see how the active link changes the background into another color.

    3) How do I set a specific size to the right and left vertical borders on the navigation link so each one looks like its the same size. example: http://www.apple.com

    4) How do I move the sign up now into the same row as the name and email down near the socket?

    Thanks!

    February 17, 2014 at 8:34 pm #225064
    jmikhail
    This reply has been marked as private.
    February 17, 2014 at 8:41 pm #225073
    jmikhail

    I should probably add that I’d like to see the logo sit on top of the navigation as well in mobile view so the social icons and the Logo need to be swapped.

    I also noticed the menu in mobile view is sitting on top of the layer slider, how do we move this up so its centered?

    Thanks!

    February 18, 2014 at 9:15 pm #225737
    jmikhail

    I’m following up to this as I solved couple things, and you no longer have to login – I disabled the maintenance mode.

    1) How do I adjust my logo positioning, I’d like the bottom of the body to sit on top of the navigation bar and probably move the logo further to the left as well.

    I was able to get the image of the person to sit on on nevigation bar by adding the margin-top: 20px but I can’t get the logo to position further to the left without an issue. I’d like to see the body somewhat behind the “Home” button.

    2) How do I set up the navigation so when I click on an active page it changes the color of the background and makes it look like a rectangle, for example click on one of the pages at http://www.apple.com and you see how the active link changes the background into another color.

    I figured out the background color for the active page. However, how do I get it to not set “home” as an active page with that background color? I prefer the background color to only show up on the other pages.

    3) How do I set a specific size to the right and left vertical borders on the navigation link so each one looks like its the same size. example: http://www.apple.com

    I can’t figure this one out, I’d like to see each tab Home, Bio, Giving Back, Speaker etc to each be in the same block size regardless of the length of characters used. Apple does it nicely.

    4) How do I move the sign up now into the same row as the name and email down near the socket?

    Still can’t figure this out either.

    Thanks!

    February 19, 2014 at 4:38 am #225927
    Ismael

    Hi!

    3.) You can set a minimum width for the menu but this might cause you trouble on smaller screen sizes. Use media queries to change the width on smaller screens. Add this on Quick CSS:

    .bottom_nav_header.social_header .main_menu ul:first-child>li a {
min-width: 100px;
text-align: center;
}

    4.) Can you please post a screenshot of what you’re trying to do?

    Regards,
    Ismael

    February 19, 2014 at 6:10 am #225953
    jmikhail

    Sorry, I think my posts got all confusing. Please view screenshot with #1 at the top and #2 at the bottom.

    https://www.evernote.com/shard/s77/sh/e74bf74f-d382-4b0c-97ab-493ece546402/f52372d28d927d81b7b982e5e4a0ce08

    February 19, 2014 at 8:47 am #226022
    Ismael

    Hi!

    Please use this on Quick CSS to align the button:

    #av_section_8 .avia_ajax_form .form_element_half {
width: 30%;
}

#av_section_8 .avia_ajax_form p:last-child {
float: left;
width: auto;
clear: none;
top: 27px;
left: 10px;
}

    Cheers!
    Ismael

    February 19, 2014 at 8:56 am #226025
    jmikhail

    Thanks Ismael, what about moving the logo position over to the left?

    February 19, 2014 at 9:13 am #226037
    Ismael

    Hey!

    I’m sorry I thought you already fix that. You can use this:

    .bottom_nav_header.social_header .logo {
position: relative;
left: -50px;
}

    Use negative pixel value for the left property. :)

    Cheers!
    Ismael

    February 19, 2014 at 8:00 pm #226400
    jmikhail

    Thank you Ismael this worked.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Header Navigation Styling Adjustments & Moving the Contact form button’ is closed to new replies.