WordPress.org

Support

Support » Themes and Templates » Celestial - Lite » [Resolved] iphone menu

[Resolved] iphone menu

  • 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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    I have access to css.

    Theme Author Styled Themes

    @gejay

    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.

    Theme Author Styled Themes

    @gejay

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

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

    Theme Author Styled Themes

    @gejay

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

    Theme Author Styled Themes

    @gejay

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

    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.

    Theme Author Styled Themes

    @gejay

    You’re very welcome…definitely worth 1000 stars rating 🙂
    lol…just kidding. But glad you got it to work.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Resolved] iphone menu’ is closed to new replies.
Skip to toolbar