Viewing 30 posts - 1 through 30 (of 32 total)
  • Author
    Posts
  • #594249

    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…

    #594823

    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

    #594892

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

    #594894

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

    #595344

    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

    #595424

    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.

    #596071

    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

    #596263

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

    It should be ok now

    #596270

    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…

    #598060

    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

    #598262

    It nearly works …

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

    #600217

    Hi!

    Add this css code:

    #header {
        height: 50px;
    }

    Best regards,
    Ismael

    #601924

    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;
    }

    #602334

    Hi,

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

    Best regards,
    Rikard

    #602427

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

    #602432

    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 ago by Vinay.
    #602451

    :-( 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

    #603802

    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

    #612622

    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;
    }

    #613096

    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

    #613134

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

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

    #613191

    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

    #613299

    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…

    #613653

    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

    #614034

    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;
    }

    #616064

    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

    #616195

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

    #616277

    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

    #616343

    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

    #616377

    Hey!

    use this code in Quick CSS for it:

    nav.main_menu {
    top: -45px;
    }
    

    Regards,
    Andy

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