WordPress.org

Ready to get started?Download WordPress

Forums

Celestial - Lite
[resolved] iphone menu (10 posts)

  1. GeorgiaG
    Member
    Posted 1 year ago #

    Hi there. I am wondering what I would manage in the css to adjust the color of just the menubar/drop down on the iPhone. And also how I can add the word Menu to it in the closed state. Thank you. Georgia

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you have a section of the dashboard named, "Custom CSS", "Custom Styles" or "Jetpack"?

  3. GeorgiaG
    Member
    Posted 1 year ago #

    I have access to css.

  4. StyledThemes
    Member
    Theme Author

    Posted 1 year ago #

    For the mobile menu styling, you will find this in the theme's menu.css file located in the css folder of the theme.

    You will want to look for the styles that are in the lower part of the file where it starts with this:

    /* mobile menu styling */
    @media (max-width: 979px) {

    Background colour and other colours are there. Make sure for any styles with the !important added to the end, this stays intact because it's needed.

  5. StyledThemes
    Member
    Theme Author

    Posted 1 year ago #

    For the "adding the Menu" word in the closed state, this will require editing the header.php file (which I recommend doing the child theme method to make modifications to the theme main files). Replace this:

    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

    With this:

    <span>Menu</span>

    Then to edit the style (which by default is the colour of white), in the child theme's style.css under the part for " Add your Bootstrap.css changes here ", you will add this:

    .navbar .btn-navbar {
                    color:#656565;
                    -webkit-box-shadow: none;
                    -moz-box-shadow: none;
                    box-shadow: none;
    }
  6. GeorgiaG
    Member
    Posted 1 year ago #

    Thank you. I will try this out! I appreciate your help.

  7. StyledThemes
    Member
    Theme Author

    Posted 1 year ago #

    You're very welcome... let me know how it works out.

  8. StyledThemes
    Member
    Theme Author

    Posted 1 year ago #

    Hi GeorgiaG.... I wanted to follow up to see how things went with the change to the mobile menu?

  9. GeorgiaG
    Member
    Posted 1 year ago #

    This worked great. I used the following so the closed and hover state would be affected

    a.btn.btn-navbar {
    background:#444444;
    color:#e0d99f;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    }

    .navbar .btn-navbar:hover, .navbar .btn-navbar.active {
    color: #ad912b;
    background: #222222;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    }

    For some reason the header code showed the characters for <span></span> but it was fine when I just put it into words. We must be on different type of server or something.

    Thank you again and BTW, I think the way your handled your iPhone menu drop-down is very elegant.

  10. StyledThemes
    Member
    Theme Author

    Posted 1 year ago #

    You're very welcome...definitely worth 1000 stars rating :)
    lol...just kidding. But glad you got it to work.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic