Top Header Menu colors & Logo Size

Hello Muffin Team,

I been a little stuck with some simple adjustments. First this is the site: [Links visible only for registered users]

  1. I need the CSS that controls the underline for my menu. I'll like to change the color of it.
  2. How can I increase the top bar logo. I am going based out of the Steak Demo. I tried the solutions for similar discussions, but there is no change. The only thing that I can increase is the Top Header, but then I get a gap between the menu and the content...and the logo does not resize.
I like the logo size, even like the way the menu works under the logo ... for your politics demo.

Hopefully you can give me a hand.


Comments

  • Hi,

    1. To control the hover line under menu, please use below css:
    #Top_bar .menu > li > a::after { background: #000 !important; }
    2. Did you saw the logo size you used for header [Links visible only for registered users] ? It's small as you see and that's why can't be increased.
  • Great thank you. The top bar menu worked. I'll keep you posted on the logo.
  • edited June 2015
    Hi,

    I'm using the beSport theme (www.gasparinfencing.net) and I too want to increase the size of my logo. How can I do that? The size of my logo is 600x200, but as you can see it's waaaayyyy smaller. 
  • @hunt1151 Below css will do the trick:
    #Top_bar #logo { height: 100px !important; }
  • Thank you so much!
  • Well good day. Sorry I couldn't jump on earlier. Our server crashed.


    The logo is getting cut off. I tried increasing the wrapper height but then other content goes out of place in the site.

  • Hello Guys,

    I am pretty tired...sorry. I can't figure out why my logo gets cut off.
    Also, my sticky menu stopped working.

    I was working with the Inspect Element in chrome and noticed that when I turn his CSS off the menu sticky menu comes back. However, in my custom css (in theme options) i dont have that css at all.

    .header-split #Top_bar {
    1. /* position: static; */
    }
    image
  • @sasspr To increase header height, please use below css:
    #Top_bar { height: 130px !important; }
    But about sticky menu, make sure you activate sticky header under Theme options > Header & Subheader > Header section.
  • Got it.  Worked. 

    Now I have to figure out how to get the sticky hearder back in its spot. Honestly I think it has to do something with the CSS I probably did by mistake. But this ist he last part I need so I can show my boss.

    I don't want the menu white and I want the sticky back.
  • edited June 2015
    Ok here we go. This is a screen shot of Google Chrome. When I turn off the white background (see the green highlight code) the sticky menu works and the background comes back.

    In my costume CSS I don't have that CSS tag so I don't know how to take it off.



  • edited June 2015

    imageimage
  • Because it's not custom css. It's something in files but this shouldn't be a problem. Did you activated sticky menu as we asked above? Because you did not replied on our question.
  • edited June 2015
    Yes. I did and it had no effect.  I decided to drop the idea of the sticky menu. I've spent over a week on this project and need to move forward with others.

    There are other things that I am finding which have more priority.


    I'm getting a huge gap between menu item sections.
  • So if this does not work, please send us private message with access to your dashboard and we'll look on sticky header. About the gap, we do not see any. Where exactly you got it? Any screenshot?
  • Here of the left hand column. you see the big empty space.

    image
  • Ok, we see now. If you used columns properly in the back-end, you must use "Divider" items as well between rows. After this, all should be fine.
  • Aww awesome. I will give it a try and let you know. Sorry I am working on multiple projects... first shot I get I'll take  care of this.
  • Yep. It worked a little better. Thank you.

    I noticed one weird thing on my menu. My links have a roll over with a orange line under. When active the orange link is suppose to stay, but the Menu link goes back to its normal stage.


  • Is it possible to show us this behavior on screenshot? Because we have no idea what you mean. We tried to find this on your site but we did not found anything like this.
  • Ok here they are. When I visit about us, i get the underline  and it stays there as long as im on the About us Page.  The menu link, gets the orange underline during roll over, but when active, it goes away. 

    All the other pages keep their active state as i'm on them but menu loses it.

    imageimage
  • Maybe you forgot to set homepage under Settings > Reading section and that's why Menu item does not have orange border?
  • My home page is set to HOME. The menu doesnt have a HOME link that is the logo.
  • One more thing. You activated "One page" option for this page while it is not one page. If you will deactivate this option, all should be fine.
  • Genius. Thanks that worked.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.