Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 27, 2016 at 6:21 pm #573126
    katelynkingtaylor

    Hi- I’ve read multiple threads regarding splitting menu items so that they occur on both sides of a centered logo, but the css doesn’t seem to be working correctly for me. My site is ktaylorcreative.com. Below is a link to an image showing what I’m aiming for with notes on each item.

    https://drive.google.com/file/d/0B1cKx0dhvwgxVXRCTl9BUnNxSkU/view?usp=sharing

    Thanks for your help!

    Katelyn

    January 28, 2016 at 3:08 am #573421
    Elliott

    Hi katelynkingtaylor!

    There isn’t enough space there so you’ll need to reduce the padding in your custom CSS from 45px down to 5px and then add this to your custom CSS to create the space for your logo.

    #top #menu-item-3286 {
    padding-right: 300px !important;
}

    Regards,
    Elliott

    January 28, 2016 at 6:31 am #573502
    katelynkingtaylor

    Hi Elliot,

    Thanks for your response, but this doesn’t seem to be working. See updated site. There is now a space for the logo, but I want the menu & borders to float on the left and the right of the logo, aligned vertically with the logo as shown in the marked up image I linked in my first message.

    Thanks,

    Katelyn

    January 29, 2016 at 12:52 am #574208
    Vinay

    Hey!

    Please replace the earlier CSS code with the below css.
    If you still have issues please provide us admin login details as private content so we can login and take a look.
    Feel free to adjust margins and paddings values like 200 to 100 or what ever number looks good to you.

    

.av-main-nav {  
margin-top:55px!important;
}

.av-main-nav li:nth-child(3) {
    margin-right:220px;
}

.av-logo-container {
position:absolute;
left:40px;
}

#header_main_alternate {
    margin-top: -50px;
}

    Cheers!
    Vinay

    January 29, 2016 at 1:12 am #574213
    katelynkingtaylor

    Thanks for the response, but still not working. Sending login in private content below.

    January 29, 2016 at 3:54 pm #574607
    Vinay

    Hi!

    Please make the user name provided an administrator user and we need your permission to add CSS in the backend. Currently i cannot see any admin options in the backend after I login.

    Cheers!
    Vinay

    January 29, 2016 at 7:48 pm #574781
    katelynkingtaylor

    I give you permission to add CSS in the backend and have made you an administrator.

    Thanks,

    Katelyn

    January 30, 2016 at 8:18 pm #575076
    Vinay

    Hi!

    Please check the website now we have made the modifications as best as we could.

    Below is the css added 

    

/*centered menu*/
.av-main-nav li:nth-child(3) {
    margin-right:350px;
}

.av-logo-container {
 position:absolute;
}

#header_main_alternate {
    margin-top: -100px;
    z-index:9;
}
.logo {
z-index:9999!important;    
max-width:200px;
}

/*reduce gap below menu*/

.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 85px!important;
}

    Regards,
    Vinay

    February 9, 2016 at 12:58 am #579986
    katelynkingtaylor

    Hi – Thanks for attempting, but this still isn’t working properly. I decided the easiest way to get this looking the way I want is to write the custom code for my header in a blank page (with no header/footer) as one grid row which I can then save as a template so that it can be loaded at the top of other blank pages. I know this isn’t the most efficient way to do it, but I can’t figure how else to make it look the way I want. I’m just going to link each word manually to its page instead of using an actual menu. You’ll see that this code now exists in the top grid row of this page (must login to access – see previously provided admin name & pw). So the only thing I need from you guys now is clarification on how to make this one row sticky as if it were the actual header/menu. I’ve assigned a section ID “ktheader” to the row. Is there some CSS I can just insert to make that section sticky? If it involves editing the php instead I would prefer that you just make the change so that you can confirm it is working properly.

    One thing to note – I had to check ‘Disable Shortcode Processing’ as well as ‘Deactivate schema.org markup’ in order for all of the code to translate properly to other pages as a template without parts getting lost. If you need to turn either of these settings off in each of the row’s columns in order to make the sticky function work that’s fine. I can just manually copy and paste the code into other pages.

    Thanks for your help,

    Katelyn

    February 9, 2016 at 5:21 am #580111
    katelynkingtaylor

    One quick revision to my previous post. I realized that using the same code in individual column elements as opposed to columns in a grid row makes the header elements function best in responsive modes. I’ve added the same code for my proposed “header” in separate columns below the original grid row as described for reference. Without having the ability to apply a section ID to this row since it’s not a grid row, is there a way to still make this row act together as a sticky header?

    February 9, 2016 at 12:05 pm #580316
    Vinay

    Hi!

    As far as I remember we had made one menu which looked very close to what you are trying to do but looking at the current modifications it is way off our support scope. if you can remove all the customizations and just have the default theme we can definitely try something out.

    Cheers!
    Vinay Kashyap

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.