Viewing 30 posts - 1 through 30 (of 32 total)
1 2
  • Author
    Posts
  • March 7, 2016 at 12:38 pm #594249
    tintin119

    Hello,

    I’d like to make a very simple header with only main menu + social icons centered on the same line without logo

    just like this :

    I saw a lot of topics and tried a lot of CSS but I can’t find what I need…

    Thank you for your help…

    March 8, 2016 at 7:01 am #594823
    Rikard

    Hi tintin119,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    March 8, 2016 at 9:43 am #594892
    tintin119

    The website is not active but I can see it if you modify your hosts file.

    March 8, 2016 at 9:47 am #594894
    tintin119

    Here is the design I have to follow (wide screen, not boxed) :

    March 9, 2016 at 7:28 am #595344
    Rikard

    Hi,

    Thanks for the link, I’m not sure what to make of that though. It’s looks like you are not using one of our themes?

    Thanks,
    Rikard

    March 9, 2016 at 10:14 am #595424
    tintin119

    Here is the result for the moment with Enfold (is it what you saw on screen after modifying your hosts file?) :

    here is the URL
    I just have to find a way to :
    – remove the logo line
    – add the secondary menu on the same line than the primary menu.

    March 10, 2016 at 6:32 am #596071
    Rikard

    Hi,

    I’m sorry but we can’t edit host files to be able to access your site, please put it in construction mode if you don’t want it to be publicly accessible, we can have a look after that.

    Best regards,
    Rikard

    March 10, 2016 at 12:55 pm #596263
    tintin119

    Hi,
    You should access to the DEV website on that URL : http://dev.maisonsdemarseille.com/accueil/

    It should be ok now

    March 10, 2016 at 1:13 pm #596270
    tintin119

    My last try :
    .av-logo-container {
    display: none!important;
    }
    The logo disappears, the main menu takes the place of the logo but a black DIV (height 45px) still appears under the menu…

    March 15, 2016 at 12:40 am #598060
    Yigit

    Hi!

    Please add following code to Quick CSS 

    .container.av-logo-container {
    display: none!important;
}
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 50px !important;
}

    Best regards,
    Yigit

    March 15, 2016 at 9:04 am #598262
    tintin119

    It nearly works …

    A part of black background manu disappears when I scroll
    The mobile menu does’nt appear…

    March 18, 2016 at 11:39 am #600217
    Ismael

    Hi!

    Add this css code:

    #header {
    height: 50px;
}

    Best regards,
    Ismael

    March 22, 2016 at 3:59 pm #601924
    tintin119

    It’s all ok on PC and Tablet !!

    But no menu on smartphone :-(

    All my quick CSS :
    .av-main-nav>li>a {
    letter-spacing: 1px;
    }
    .entry-content-wrapper h1{
    letter-spacing: 20px !important;
    }
    .entry-content-wrapper h2{
    letter-spacing: 16px !important;
    }
    .avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
    -webkit-animation: none;
    animation: none;
    }
    .avia_desktop .av-hover-overlay-active .av-masonry-image-container {
    opacity: 1;
    }
    .av-masonry-image-container:hover { transform: none !important; }
    .container.av-logo-container {
    display: none!important;
    }
    .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 50px !important;
    }
    #header {
    height: 50px;
    }

    March 23, 2016 at 6:44 am #602334
    Rikard

    Hi,

    Did you move the site? I get a blank page when going to (url in private)

    Best regards,
    Rikard

    March 23, 2016 at 10:35 am #602427
    tintin119

    No, it’s a wron URL… Go to http://dev.maisonsdemarseille.com

    March 23, 2016 at 10:51 am #602432
    Vinay

    Hi!

    To achieve a header without logo just the menu and social icons go to appearance > menu > Check secondary menu

    Enfold > Header > Extra Elements >

    Edit the options for Header Secondary Menu and Display social icons on top right


    Then hide the main menu using CSS

    Cheers!
    Vinay Kashyap

    • This reply was modified 8 years, 8 months ago by Vinay.
    March 23, 2016 at 11:47 am #602451
    tintin119

    :-( That was not my question…
    I found a solution to add icons in the main menu with “menu icons” plugin by Dzikri Aziz
    All is ok on PC and Tablet…

    But on smartphone, I only have a black space without mobile menu… (even if i desactivate “menu icons” plugin)

    null

    March 26, 2016 at 11:35 am #603802
    Andy

    Hey!

    I think some custom CSS is causing this issue. Maybe any media queries you are using. So try to remove all your custom CSS code to check which one is causing it. Let us know if you still need help afterwards.

    Best regards,
    Andy

    April 13, 2016 at 12:09 pm #612622
    tintin119

    I did’nt see you answer… :-/

    Here is all my custom CSS :
    .av-main-nav>li>a {
    letter-spacing: 1px;
    }
    .entry-content-wrapper h1{
    letter-spacing: 20px !important;
    }

    .entry-content-wrapper h2{
    letter-spacing: 16px !important;
    }
    .avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
    -webkit-animation: none;
    animation: none;
    }

    .avia_desktop .av-hover-overlay-active .av-masonry-image-container {
    opacity: 1;
    }
    .av-masonry-image-container:hover { transform: none !important; }
    .container.av-logo-container {
    display: none!important;
    }
    .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 50px !important;
    }
    #header {
    height: 50px;
    }

    The CSS code causing the problem is that one :
    .container.av-logo-container {
    display: none!important;
    }

    April 13, 2016 at 6:50 pm #613096
    Andy

    Hi!

    posting all your css code here does not help us. As I already said: remove it completely to check if things get better for you. Then you can put it in again one by one to find out which one is causing the problem.

    Best regards,
    Andy

    April 13, 2016 at 7:31 pm #613134
    tintin119

    You did’nt read me until the end ;-)

    The CSS code causing the problem is that one :
    .container.av-logo-container {
    display: none!important;
    }

    April 13, 2016 at 8:47 pm #613191
    Vinay

    Hi!

    Glad you found the code which was causing the issue. We checked the site and it is looking similar to the description. Please let us know if you have any questions for us.

    Regards,
    Vinay

    April 13, 2016 at 11:37 pm #613299
    tintin119

    All is ok on desktop but there is still no menu on mobile… :-(
    This code allows to remove the logo but it removes mobile menu too…

    April 14, 2016 at 10:02 am #613653
    Andy

    Hi!

    remove the code causing the issue and use this one to hide your logo instead:

    @media only screen and (max-width: 767px) {
.responsive #top .logo {
display: none;
}}

    Cheers!
    Andy

    April 14, 2016 at 3:55 pm #614034
    tintin119

    It doesn’t work… I don’t want any logo (desktop or mobile.

    I tried that code :
    .responsive #top .logo {
    display: none;
    }

    Mobile menu appears but not at the good place… The same for desktop menu.
    You should see it on http://dev.maisonsdemarseille.com

    Here is my last custom code :

    .av-main-nav>li>a {
    letter-spacing: 1px;
    }
    .entry-content-wrapper h1{
    letter-spacing: 20px !important;
    }
    .entry-content-wrapper h2{
    letter-spacing: 16px !important;
    }
    .avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
    -webkit-animation: none;
    animation: none;
    }
    .responsive #top .logo {
    display: none;
    }

    .avia_desktop .av-hover-overlay-active .av-masonry-image-container {
    opacity: 1;
    }
    .av-masonry-image-container:hover { transform: none !important; }
    .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 50px !important;
    }
    #header {
    height: 50px;
    }

    April 18, 2016 at 6:31 am #616064
    Ismael

    Hi!

    The mobile menu is located at the very top of the page that’s why you can’t see it. Please add this:

    @media only screen and (max-width: 767px) {
#advanced_menu_toggle, #advanced_menu_hide {
    top: 50px;
}

.html_header_top.html_bottom_nav_header #header_main {
    height: 50px;
}
}

    Best regards,
    Ismael

    April 18, 2016 at 9:15 am #616195
    tintin119

    All is ok now on mobile… But I have still a new problem on desktop menu… :-/

    April 18, 2016 at 11:26 am #616277
    Andy

    Hey!

    I checked you homepage on desktop and your menu looks good to me. What do you want to achieve? can you provide us a mockup showing the results please? use imgur.com or dropbox.

    Regards,
    Andy

    April 18, 2016 at 12:18 pm #616343
    tintin119

    Here is what I see on dev.maisondemarseille.com :
    wrong menu
    Here is what i’d like :
    good menu

    I just need to see the menu inside the black line

    April 18, 2016 at 12:45 pm #616377
    Andy

    Hey!

    use this code in Quick CSS for it:

    nav.main_menu {
top: -45px;
}

    Regards,
    Andy

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 32 total)
1 2
  • The topic ‘simple menu on Enfold without logo and with social icon on the same line’ is closed to new replies.