I am trying to make the grey main menu CSS look like

Hi, I am trying to make the grey main menu CSS look like the original site

original
Moderated site link on request

new site to look like the other
Moderated site link on request

Thank you!

  • Victor Ivanov
    • Site Builder, Child of Zeus

    Hi @Emex Online,

    I was able to have spend some more time playing with this in Chrome dev tools.
    Here's a screenshot of the layout I managed to achieve:

    https://www.dropbox.com/s/er9kr3xw6cnspin/Screenshot%202014-01-27%2017.49.02.png

    to accomplish that, please add this to your custom css:

    #navigation li {
    	padding: 0 20px!important;
    }
    #navigation li ul li {
    	padding:0px!important;
    }

    let me know how that works for ya.

  • Victor Ivanov
    • Site Builder, Child of Zeus

    hey, glad this worked for you!

    i've just had a look at the responsive, and It appears that the navigation stuff we've just added doesn't affect it as I think they are using a plugin to change the navigation to a custom build <select> list type nav.
    here's what that looks like:

    https://www.dropbox.com/s/uejrky38ubksbk4/Screenshot%202014-01-27%2017.59.43.png

    though some other changes you make, may affect it. It's difficult to say until you have tried to re-size the page. If you use something like !Important at the end of css expression it will override any other rules that might be associated with element. It's fine for the changes that we've made, because my guess is that navigation mark-up gets substituted via JS, and so we no longer have css selectors that correspond to our changes :slight_smile:

    hope this makes sense.

  • Victor Ivanov
    • Site Builder, Child of Zeus

    just had a look at that. It has words, but you have a css rule that makes them white on line 539 in avada.css

    #wrapper .header-social .header-info, #wrapper .header-social a {
    color: #FFF !important;
    }

    I am guessing that it's not something you added but instead was there.

    You could try overriding the specificity with something like

    #wrapper .header-social #mobile-nav .mobile-nav-item a {
    color: #333;
    }

    let me know if that works

  • Emex Online
    • The Incredible Code Injector

    HI @Victor
    Yes, that was it! great thanks!

    Can you do one more for me please.

    I have this code for the sidebar widgets titles, but i want it to be a different font.

    I want the font on Removed link on request
    To look like the font on Removed link on request

    This is the code for that section, I just need the font added please.

    #sidebar .widget h3, #sidebar .widget .heading h3{font-weight:bold; font-size:15px !important;}

  • Emex Online
    • The Incredible Code Injector

    Hi @ Victor
    Yes, and Yes!

    Thanks so much!

    Wondering about this?

    Ok, the goal for me is to make Removed link on request look as much as I can like Moderated site link on request) as that is the original site and then I migrated it and put a new theme on it.

    So if you look at these pages (the same on each site.
    You can see on the orignal site Moderated site link on request that the text wraps around the main image at the top of the page.

    But on the new site when it was migrated over and re-theme Moderated site link on request the text goes below the image.

    There are A LOT of pages on this site. So can you tell me please. Is there a CSS that can fix this? Or do I need to go and put text wrap around every one of those on each page?

    Can help me with CSS for this too please?

    Thank you!

  • Victor Ivanov
    • Site Builder, Child of Zeus

    hmm, is it always the 1st image on the page that you want text to wrap around?

    try adding this, though bear in mind, this will apply it to all images that match the css selector, so if later on you want a page that doesn't have that, you'd have to hack around it.

    .type-page .image {
    float: left;
    margin-right: 15px;
    }

    this will float the image to the left & also make a 15px margin around it so that text doesn't run into it.

  • Emex Online
    • The Incredible Code Injector

    Hi @Victor
    Yes! That was it! Thank you!

    OK, one more :slight_smile:

    See the grey main menu, I have added borders on it and lines, it is also the same as the sticky menu. When it is the grey main menu, I'l like it to etiher....
    Be stretched to its fits exact above the slider or to be centered above the slider.
    But when I stretch it (add px or padding) then it makes it so that when it becomes the sticky slider then it gets too large and pops out of the background i have set for the sticky slider., And when I use center, it doesn't work. Can you figure out a way to resolve this?

    This is the code I have for it so far...

    #nav ul li, #sticky-nav ul li {
    padding-right: 0px;
    border-right: 1px solid #333;
    }

    #navigation li {
    width: 106px;padding:0px !Important;
    text-align: center; float: left; display: inline-block
    }

    #navigation li ul li {
    padding:0px!important;
    }

  • Victor Ivanov
    • Site Builder, Child of Zeus

    hmmm, not sure I understand.

    Do you want to change the behaviour of that sticky navigation so that it no longer sticks as the user scrolls and instead just stays above the slider like on this site Moderated site link on request

    Or do you want the sticky behaviour to remain as it is, but you don't want the navigation to get wider?

  • Victor Ivanov
    • Site Builder, Child of Zeus

    hmm, i think i see what you mean...

    well, I've given this a shot, though to be honest, when you have to do that much hacking, it may be better to consider a different theme. Not that it's much additional code, but mainly because it's difficult to predict under what circumstances this can go wrong.

    Anyways, give this a shot and let me know if it works for you:

    div#small-nav { padding:0!important; }
       #small-nav .avada-row { max-width:960px; }
       #navigation li { width:118px; }
       .main-nav-search { width: 124px!important; }
       #sticky-nav li { width: 105px!important; }
       .sticky-shadow { width:100%; }
       #sticky-nav li ul li { width: auto!important; }

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.