Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 23, 2015 at 6:55 pm #384547
    filz51

    Hi
    I have two adjustments to make on the mobile version my website
    1. I want to move the info-field with the phone-number to the top left and the login-link to top right. How can I do that?
    2. The social bookmarks should move some pixels down so that they do not overlay the logo. I tried to adjust the custom css-code on my own but I did not succeed.

    For the social bookmarks I used the following css:

    @media only screen and (max-width: 767px) {
    /* Add your Mobile Style here */
    .responsive.html_header_top #header_main .social_bookmarks {
    top: -35%; }
    #header_main { z-index: 10; }}

    @media only screen and (max-width: 480px) {
    /* Add your Mobile Style here */
    .responsive.html_header_top #header_main .social_bookmarks { top: -48%; right: 9%; }}

    On the Desktop.-Version I want to use capitals only in the main-menu but not in the submenu and not in the footer-menu and the 2nd menu.

    Regards, filz51

    January 24, 2015 at 11:47 am #384838
    Ismael

    Hi filz51!

    Thank you for using Enfold.

    Add this on Quick CSS:

    @media only screen and (max-width: 767px) {
.responsive .phone-info {
float: left;
width: auto;
clear: none;
}

.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
float: right;
width: auto;
}

.main_menu, #header_main_alternate, .responsive #header .main_menu ul {
display: block;
}
}

    Cheers!
    Ismael

    January 28, 2015 at 6:27 pm #387257
    filz51

    Hi Ismael
    Thanks for your reply. I added your code to quick css. Now on desktops the social bookmarks moved to the infobar and there they overlay the login-link. Not good. And the main topmenu on desktops is still not capitalized.
    On mobile devices (checked on iPhone Safari) now the menu-bar shows up next to the menu-button what is very redundant. I want the menu-button only.

    Now my quick CSS looks like this:

    .responsive.html_header_top #header_main .social_bookmarks {
    top: -35%; }
    #header_main { z-index: 10; }}

    @media only screen and (max-width: 480px) {
    .responsive.html_header_top #header_main .social_bookmarks { top: -48%; right: 9%; }}

    @media only screen and (max-width: 767px) {
    .responsive .phone-info {
    float: left;
    width: auto;
    clear: none;
    }

    .responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul {
    float: right;
    width: auto;
    }

    .main_menu, #header_main_alternate, .responsive #header .main_menu ul {
    display: block;
    }
    }

    Could you please have a look?

    Cheers, filz51

    January 30, 2015 at 7:33 pm #388466
    Elliott

    Hi!

    Your CSS is moving the social bookmarks up on top of the phone number and login link.

    .responsive.html_header_top #header_main .social_bookmarks {
top: -35%; }
#header_main { z-index: 10; }}

    I’m not really sure what your trying to do there. Can you take a screenshot and highlight your intentions?

    Best regards,
    Elliott

    January 31, 2015 at 12:43 am #388648
    filz51

    Hi Elliott

    If you visit my homepage with a smartphone you see the menu covering almost half of the screen. I don’t want the menu show up on mobile devices because I already have the menubutton there. Instead of the menu the social bookmarks should appear below the logo. See screenshot

    On desktops I want the main topmenu in CAPITALS and the social bookmarks next to it on the right side. Now they are overlaying the login-link in the top barSee screenshot

    Thanks for your patience and support
    filz51

    February 2, 2015 at 11:46 am #389246
    Rikard

    Hi filz51!

    Add the following code to hide the menu on phones:

    @media only screen and (max-width: 767px) {
	#avia-menu{display:none;}
}

    Add the following code to turn all top level menu items to uppercase on desktop only:

    @media only screen and (min-width: 960px) {
#avia-menu > li{text-transform:uppercase;}
.sub-menu > li{text-transform:capitalize;}
}

    Best regards,
    Rikard

    February 5, 2015 at 6:14 pm #391506
    filz51

    Hi Rikard
    I added these codes to quick css flushed all caches but it still looks the same. Do you want to have a look in the backend?
    Regards, filz51

    February 6, 2015 at 12:30 pm #391961
    Ismael

    Hi!

    Yes, please. Set it as a private reply. Also, kindly check the css codes, maybe you forgot to close certain lines which prevent the fix above from being applied.

    Best regards,
    Ismael

    February 28, 2015 at 7:31 pm #403882
    filz51
    This reply has been marked as private.
    March 2, 2015 at 7:04 am #404317
    Rikard

    Hey!

    Great, glad you solved your problem :)

    Cheers!
    Rikard

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