Okay
  Public Ticket #1174631
menu Button vanishes!
Closed

Comments

  • Rico started the conversation

    The button on the menu is both too bright when in transparency mode and it disappears when one scrolls down. How does one change the color and transparency of this button?

    Thanks!  Rico

  • Rico replied

    DUDE! I JUST FIGURED IT OUT and wrote up the code in CSS. Thanks!

  • Rico replied

    Well, not really. The text disappears on lighter backgrounds, even though I have the color to #add. Can you help?

    Here is my CSS:

    .transparent .btn  {
    color: #add;
    border-color: #add;
        opacity: .5;
    height: 30px;
    font-size: 13px;
    line-height: 27px;
    min-width: 0;
    /* Menu Button */
    }

    Thanks!

  •  1,020
    TommusRhodus replied

    Hi there

    Looks like you figured this out

    However if you wish to make it less opaque you can change the opacity, like this

    .transparent .btn {
        color: #add;
        border-color: #add;
        opacity: 1;
        height: 30px;
        font-size: 13px;
        line-height: 26px;
        min-width: 0;
    }
    

    Thanks, Danny

  • Rico replied

    Thanks for the CSS tip. I have been enjoying the power! One problem is that the text in the button, even though I have it as #add,  stays white and so disappears when the menu is scrolled. What do I need to do to correct that?

    Also, how can I  change the opacity of the menu bar?

    Thanks again!

  • Rico replied

    I checked in other browsers and just noticed that in Safari it does not show up. In Chrome and Firefox it looks fine. Is there a fix just for Safari?

    Thanks!

  • Rico replied

    And how do I make logo turn light grey to match the other menu items when the menu scrolls down? Also, is there a way to not make the menu sticky?

    Thanks

  •  1,020
    TommusRhodus replied

    Hi there

    Clear your safari caches, as you can see it works so this will be a caching issue im sure.

    For your logo colour, im not sure what you mean here as the logo is a static image so it will show whatever logo your provide. 

    For further help with theme customisation, you can contact our customisation partners here:

    http://www.tommusrhodus.com/contact/

    I'm closing this ticket now as the main question is moving towards theme customisation, which is not covered in these support tickets.

    Cheers, Danny

  • Rico replied

    Sorry, not logo, the button. How do I make the button that I now have as #add turn grey as the rest of the menu text does when scrolled down? Thanks!

  • Rico replied

    And is there a way to not make the menu sticky?

  •  1,020
    TommusRhodus replied

    Hi there

    Place the following CSS in your custom css area and tweak as you wish

    .transparent.fixed .btn-sm {
        color: #add;
        border-color: #add;
        opacity: .5;
        height: 30px;
        font-size: 13px;
        line-height: 26px;
        min-width: 0;
    }

    Any further design changes your looking to make will need to be directed to a developer using the link provided below

    I'm closing this ticket now as the main question is moving towards theme customisation, which is not covered in these support tickets.

    Cheers, Danny

  • Rico replied

    Hi Danny,

    Sorry as you have been very helpful, but this needs to be resolved as it is not a custom item but simply adding a small button that is on your menu and it does not behave correctly. I put in your coding as well as isolated the button with my own codes but nothing seems to work. I also emptied the case to eliminate that issue. Here is my code:

    /* Menu Bar */
    .perm-fixed-nav nav.fixed {
    position:;
    visibility: visible;
    opacity: .9;
    transform: none !important;
    }

    /* Menu Button */
    .transparent .btn-sm {
    color: #000;
    border-color: #add;
        opacity: .5;
    height: 30px;
    font-size: 13px;
    line-height: 26px;
    min-width: 0;
    }

    As you can see from the attached file, the button text turns white on the menu bar, disallowing it from being seen on the white menu bar. You actually must hover over the button in order to see it turn the grey that the rest of the menu already is. I just need the button to respond like the rest of the menu labels do. Can you help? Thanks so much!

    Rico

    Attached files:  Screen Shot 2017-05-19 at 4.41.43 AM.png

  • Rico replied

    ... emptied the cashe to eliminate that issue.

  •  1,020
    TommusRhodus replied

    Hi there

    This is what I see

    Which is fine, however if your seeing different try adding this to your CSS also, which may help

    .transparent .btn-sm, .transparent .btn:visited {
        color: #add !important;
    }
    

    Thanks, Danny

  • Rico replied

    And this may be a Safari issue as it seems to work on Firefox and Chrome.   :-/ 

    What I don't understand is why would I need to add code to control the button to begin with? Why doesn't it act like the other items on the menu such as the categories and Social media icons?

    Rico

  •  1,020
    TommusRhodus replied

    Hi there

    Its also working well in Safari here 

    What version are you using? Are you able to try another machine?

    Thanks, Danny

  • Rico replied

    Wow! I wish that is what I saw! Maybe it is a Mac issue? Are you on a PC? NONE of my browsers, including the iPhone or iPad shows this correctly!

  •  1,020
    TommusRhodus replied

    Hi there

    I have both mac and windows here, the last gif was taken on the mac and the previous gif was on windows

    It does seem just your machine is seeing the issue, you can try safari elsewhere to confirm this however

  • Rico replied

    This is very odd. I just tested it as well on a MacBook pro laptop, a iMac 5k, ( in Safari, Chrome, Firefox) iPad and iPhone with all the same results. :-(

  • Rico replied

    I am also firing up 2 PC tablets with different browsers to see what they look like. Will let you know. Any clue as to how I might fix the Mac issues?

  •  1,020
    TommusRhodus replied

    Sorry, just to clarify, "MacBook pro laptop, a iMac 5k, ( in Safari, Chrome, Firefox) iPad and iPhone with all the same results. :-(" does this mean it worked on the macbook pro and NOT your other machine?

    Either way, ill keep digging to see if i can replicate this - it does seem odd and we have had no other users report such an issue

    What OS and safari version are you using?

    Thanks, Danny

  • Rico replied

    I am also noticing that in your gifs, the button is not responding like the rest of the menu. Why is that and how can I add a simple button and have it look like the rest of the menu?

    Thanks again!

    Rico

  •  1,020
    TommusRhodus replied

    Please be more specific - what do you mean "not responding like the rest of the menu"? 

    Did you try this CSS? Im not seeing it in your source

    .transparent .btn-sm, .transparent .btn:visited {
        color: #add !important;
    }
    

    Also, dont forget you have modified the menu quite a lot from the original design wiht custom CSS, which of course will make a difference

    Thanks, Danny

  • Rico replied

    To answer your question, it looks the same on all of my machines meaning it does not work. OS 10.10.5 and Safari Version 10.1 (10603.1.30.0.34)

  •  1,020
    TommusRhodus replied

    Please see my other replies since asking that question also.

    Thanks, Danny

  • Rico replied

    meaning that the menu items are all in #add with a transparency, then turn grey on the white menu bar when scrolled. why does the button not work like this?

    I did put in that code which does make all #add, but it is hard to read on a white background when hovered over or when one scrolls the menu bar down. I added it again for your viewing.

    Shouldn't the button respond like the rest of the menu items so I would not need to custom code it at all?

    Thanks

  • Rico replied

    Hi Danny,

    off to sleep for a few hours as I have been up all night trying to fix this. Thanks for anything you come up with. ;-)

    Warmly,

    Rico

  •  1,020
    TommusRhodus replied

    If you want the button to be grey when scrolled, you would need to add this to your custom css (to override your previous CSS which you have added to style the menu/button) 

    .transparent.fixed .btn-sm {
        color: #728787 !important;
        border-color: #728787;
        opacity: .5;
        height: 30px;
        font-size: 13px;
        line-height: 26px;
        min-width: 0;
    }
    

    Be sure to add it BELOW any previous CSS you have applied.

    As a side note, if all your custom css is removed, this is how the menu works

    the remaining bug you can see in this gif, where the button is not visible when scrolled has been noted and will be resolved in the next updateI just wanted to let you know how things looks when your customizations are removed for comparison

    Thanks, Danny

  • Rico replied

    Thanks Danny. At least that is a fix for the button disappearing. I look forward to the next update!

    Rico

  • Rico replied

    And this is odd. Once i added your CSS code, my code to make the Menu .9 opacity stopped working! Here is my code:

    /* Menu Bar */
    .perm-fixed-nav nav.fixed {
    position:;
    visibility: visible;
    opacity: .8;
    transform: none !important;

    }

    Why would this be? a matter of position? what is the fix? Thanks Danny!

  •  1,020
    TommusRhodus replied

    You have several custom css snippets covering this so to be clear, are you referring to the opacity of the menu items (not the button) when the menu is scrolled? If so add this BELOW all previous CSS

    nav.transparent.fixed .menu > li > a, nav.transparent.fixed .module.widget-handle i {
        opacity: 0.9 !important;
    }
    

    Thanks, Danny

  • Rico replied

    The white navigation bar background when scrolled. I had it just slightly transparent to give a nuanced depth but with the last CSS entry on the button it stopped working. I added yours without luck.

    Rico

  • Rico replied

    Hi Danny,

    THAT WAS FAST! I just uploaded your update but see that the menu item was not addressed yet. What fixes/additions did you do? Also, I like the Center Transparent Header but you don't have a version with the top utility bar out as you do with the other samples. Also, the logo and menu drops down quite a bit. Is there a way of adjusting that?

    Thanks!

  •  1,020
    TommusRhodus replied

    Hi there

    The update was a critiical update for a recent twitter change which has affected all themes. Your issue will be addressed in the source during the next update and of course you have a solution provided in this ticket in the meantime.

    Iv also noted your suggestion for a new header style which, if possible, we will try and add also.

    Thanks, Danny

  • Rico replied

    That is great. I look forward to the updates.

    Is there code that I can add/remove to drop the Top Utility Bar from the Centered transparent Header for now? Thanks so much! The client really responded well to the new site!

    Rico

  • Rico replied

    Also, I added your code to make the Header Navigation bar slightly transparent but it did not work. I did add the following code to effectively change the opacity of the sub menu and this did work. 

    /* Sub Menu Bar transparency*/
    .perm-fixed-nav nav.fixed nav.transparent .nav-utility, nav.transparent .nav-bar {
    position:;
    visibility: visible;
    opacity: .7 !important;
    transform: none !important;
    }

    So how can we make this work with the main navigation bar? Thanks!

  • Rico replied

    Hmmm. It is amazing how playing around with the code and noticing/adding a single comma can make a difference! I just rewrote the code and can now make both navigation bars slightly translucent! Thanks for your help on this.

    /* Menu and Sub Menu Bar transparency*/
    .perm-fixed-nav nav.fixed, .nav-utility, nav.transparent, .navbar  {
    position:;
    visibility: visible;
    opacity: .8 !important;
    transform: none !important;
    }

  •  1,020
    TommusRhodus replied

    Good work

    Cheers, Danny