Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • July 8, 2015 at 3:08 am #470015
    kellymarie2001

    Hi there,

    How can I center the logo with the main navigation split to the left and right of the logo in the navigation?

    Thanks!

    July 8, 2015 at 5:41 pm #470427
    Elliott

    Hey kellymarie2001!

    It might look weird on mobiles but we can try to give you some CSS for this. Send us a link to your page and let us know where your wanting to split it at.

    Regards,
    Elliott

    • This reply was modified 9 years, 4 months ago by Elliott.
    July 8, 2015 at 7:53 pm #470511
    kellymarie2001

    The site is hidden right now since it’s being developed, but you can see a screenshot here:
    https://drive.google.com/file/d/0B2JNsJiuP4ONMjlwb2lLbDVDRzQ/view?usp=sharing

    We expect to add 2 more navigation items in the future, but for now there are just 2 navigation menus that link to anchors (one-page site).

    Thanks!

    July 9, 2015 at 10:41 am #470702
    Ismael

    Hey!

    We actually need to see the live website because we have to identify the menu item id. You can use these menu ids to adjust the position of a specific menu item. For starters, you can add this to hide the mobile menu and show the default menu:

    @media only screen and (max-width: 989px) {
.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide {
  display: none;
}

.responsive.html_mobile_menu_tablet .main_menu .avia-menu, .responsive.html_mobile_menu_tablet #header_main .social_bookmarks, .responsive.html_mobile_menu_tablet #header_main_alternate {
  display: block;
}
}

    Best regards,
    Ismael

    July 9, 2015 at 6:58 pm #471079
    kellymarie2001

    Hi Ismael,

    Thanks for working with my on this. It’s a pretty hush hush website so I’m unable to make it live (unless we schedule a specific time I know you’ll be checking it?).
    I grabbed the menu IDs using Inspector tools – they are 182 for the “about” item and 1820 for “contact”. I think that’s what you’re looking for (FYI we just switched the order of the nav to “about” then “contact”)

    Curious why you suggest hiding the mobile menu – we’re just looking to center the nav on the full-width screen.

    Thanks!

    July 9, 2015 at 7:04 pm #471080
    kellymarie2001

    Sorry that’s 180 for “contact”

    July 10, 2015 at 1:36 pm #471429
    Andy

    Hi!

    we can’t say when we are able to check your thread the next time, as there so many other people waiting for a response. Let us know when your site is live, then we will check it.

    The code Ismael provides to you is just a starting point for you. Use it to adjust it by yourself. If you want to change position use this for example: 

    @media only screen and (max-width: 989px) {
.responsive.html_mobile_menu_tablet .container #advanced_menu_toggle, .responsive.html_mobile_menu_tablet #advanced_menu_hide {
  display: none;
}
.responsive.html_mobile_menu_tablet .main_menu .avia-menu, .responsive.html_mobile_menu_tablet #header_main .social_bookmarks, .responsive.html_mobile_menu_tablet #header_main_alternate {
  display: block;
top: 10px;
right: 20px;
}
}

    However, you can hire a freelancer if you need someone who does the job for you on a specific time schedule.

    Best regards,
    Andy

    July 21, 2015 at 11:41 pm #476757
    kellymarie2001

    Hi guys! The shortcode didn’t work – wanted to see if you can take a look. Here’s the login information. If not possible I can hire a freelancer – just wanted to give this one last shot!

    July 22, 2015 at 8:27 pm #477313
    Elliott

    Hey!

    So your wanting the about link to be on the left and contact on the right? Perhaps this CSS would work.

    .logo {
  left: 50% !important;
  transform: translateX(-50%);
}
.main_menu, .avia-menu { width: 100% !important; }
#menu-item-180 { float: right !important; }

    Best regards,
    Elliott

    July 22, 2015 at 8:32 pm #477319
    kellymarie2001

    Lovely! And so close – the items are ALL the way to the right and ALL the way to the left. Any way to have them aligned just to the left and right of the logo?

    Thanks!

    July 23, 2015 at 9:59 am #477597
    Rikard

    Hey,

    Try the following as well:

    #avia-menu {
  min-width: 30%;
  display: table;
  margin: 0 auto;
}

    Cheers!
    Rikard

    July 24, 2015 at 11:01 pm #478415
    kellymarie2001

    Hey guys! The code works well but my mobile header seems to have some trouble.
    I have the header set up as transparent. In the mobile version, the header appears but the logo disappears.
    Any help would be appreciated.

    Thanks!

    July 27, 2015 at 6:05 am #478895
    Rikard

    Hey!

    The logo is still there but it’s black on black background, I check the URL of the image and it seems to be the same URL as the white one, not sure how that happened?

    Regards,
    Rikard

    July 27, 2015 at 11:12 pm #479331
    kellymarie2001

    Hi Rikard,

    I have a white logo set up in the theme options – both under Theme Options and under Header > Transparency logo. But I can’t see the logo on mobile. It looks like the container is there, but the logo’s not showing.

    I also ran into a little cross-browser issue – the navigation/menu on Safari is a little messy (see screenshot: http://prntscr.com/7xq11j)

    Thanks for all your help!

    July 29, 2015 at 4:14 pm #480323
    Yigit

    Hey!

    Please change following code 

    .logo {
  left: 50% !important;
  transform: translateX(-50%);
}

    Elliott posted here – https://kriesi.at/support/topic/logo-center-navigation-to-the-left-right-of-logo/#post-477313
    to following one 

    .logo {
  left: 50% !important;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

    Best regards,
    Yigit

    July 30, 2015 at 8:27 pm #480920
    kellymarie2001

    Thank you! But alas, not quite there… Screenshot: http://prntscr.com/7yxd5s

    Also still needing help on that mobile logo issue.

    Thank you!!

    August 1, 2015 at 5:53 am #481632
    Ismael

    Hey!

    Edit the menu item in the Appearance > Menus panel then add a custom css class attribute. You can use the class attribute to change the position of the menu item. Refer to this link: http://wordpress.stackexchange.com/questions/68062/custom-id-for-certain-menu-item

    Cheers!
    Ismael

    August 7, 2015 at 9:49 pm #484696
    kellymarie2001

    Thank you for all your help! The issue with the logo disappearing is still unresolved. Please advise – thank you!

    August 10, 2015 at 11:39 am #485181
    Andy

    Hey!

    when and where does it disappear? can you explain further please? and show us the issue? provide us a precise link where we can see the issue. Maybe even screenshots could help us see it (imgur.com, dropbox). This thread is already huge and it gets confusing for us moderators and readers searching for help, as your last question has nothing to do with the original thread title. Would be best if you open a new ticket I think.

    Regards,
    Andy

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