Title: Header (logo-menu) width
Last modified: January 28, 2018

---

# Header (logo-menu) width

 *  Resolved [gokh](https://wordpress.org/support/users/gokh/)
 * (@gokh)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/)
 * Hi,
 * • I do not want header full width-stretch. I want the default template (normal
   width).
    • How do I add an image to the Mega Menu
 * Thanks..
 * [http://www.dosya.tc/server11/93ri9n/met.jpg.html](http://www.dosya.tc/server11/93ri9n/met.jpg.html)

Viewing 15 replies - 1 through 15 (of 15 total)

 *  Thread Starter [gokh](https://wordpress.org/support/users/gokh/)
 * (@gokh)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9911633)
 * [http://www.dosya.tc/server11/fgsu2g/met.jpg.html](http://www.dosya.tc/server11/fgsu2g/met.jpg.html)
 *  Thread Starter [gokh](https://wordpress.org/support/users/gokh/)
 * (@gokh)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9911685)
 * Hi,
 * • Ok, I’ve fixed it, no problem.
    • How do I add an image to the Mega Menu?
 * Regards
 *  Theme Author [terrathemes](https://wordpress.org/support/users/terrathemes/)
 * (@terrathemes)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9914559)
 * Hello [@gokh](https://wordpress.org/support/users/gokh/),
 * great that you found a solution for your first issue.
 * Please upload a screenshot where the image in the mega menu should be and describe
   it a little bit. I can not download from that page you linked, please upload 
   them on an [image upload site like imgur](https://imgur.com/upload) and share
   the link. Maybe also include a link to your website.
 * Regards,
    Terra Themes
 *  Thread Starter [gokh](https://wordpress.org/support/users/gokh/)
 * (@gokh)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9914914)
 * Hi Terra,
 * • When I click on imgur, it says “This site can not be reached”, the site does
   not open.
    The subject of the image is not a problem, I solved it.
 * Help topic:
    • How do I add an image to the Mega Menu?
 * Regards,
 *  Theme Author [terrathemes](https://wordpress.org/support/users/terrathemes/)
 * (@terrathemes)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9915168)
 * This depends on where your image in the mega menu should be. That’s why I asked
   for a screenhot where you can paint or explain where the image should be in the
   mega menu. Then I can provide you some code to implement it.
 *  Thread Starter [gokh](https://wordpress.org/support/users/gokh/)
 * (@gokh)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9915331)
 * Hi,
 * I’m testing the theme. I would like to use Meteorite if there are Mega menu images.
 * Regards..
 * [https://i.hizliresim.com/76MMMW.jpg](https://i.hizliresim.com/76MMMW.jpg)
 *  Theme Author [terrathemes](https://wordpress.org/support/users/terrathemes/)
 * (@terrathemes)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9915417)
 * Thank you much for that image.
 * Please try out this CSS in the Additional CSS section of the WordPress Customizer
   or your child themes style.css:
 *     ```
       #main-nav .mega-menu .sub-menu li:nth-of-type(1) a::before {
         content: "";
         background-image: url('https://YOUR-IMAGE-LINK-HERE');
         display: block;
         padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
         margin: 0 0 20px 0;
       }
       ```
   
 * Keep in mind to add your image links. You can copy and paste that code as many
   times as you need. Just change the `:nth-of-type(1)` to the menu item where you
   want to add the image.
 *  Thread Starter [gokh](https://wordpress.org/support/users/gokh/)
 * (@gokh)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9915574)
 * Very good..
 * Code image you sent.
    [https://i.hizliresim.com/lOvjPr.jpg](https://i.hizliresim.com/lOvjPr.jpg)
 * After
    [https://i.hizliresim.com/Rnok4n.jpg](https://i.hizliresim.com/Rnok4n.jpg)
 * My css knowledge is minimal, I made mistakes in other image attachments. For 
   example, do you send codes with a few images attached?
 * Sample image 250x350px
    [https://i.hizliresim.com/rOZM4V.jpg](https://i.hizliresim.com/rOZM4V.jpg)
 * Thank you so much..
 *  Theme Author [terrathemes](https://wordpress.org/support/users/terrathemes/)
 * (@terrathemes)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9917046)
 * If you want that sample image for all 8 menu items, you can use this code:
 *     ```
       #main-nav .mega-menu .sub-menu li:nth-of-type(1) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         display: block;
         padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
         margin: 0 0 20px 0;
       }
       #main-nav .mega-menu .sub-menu li:nth-of-type(2) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         display: block;
         padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
         margin: 0 0 20px 0;
       }
       #main-nav .mega-menu .sub-menu li:nth-of-type(3) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         display: block;
         padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
         margin: 0 0 20px 0;
       }
       #main-nav .mega-menu .sub-menu li:nth-of-type(4) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         display: block;
         padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
         margin: 0 0 20px 0;
       }
       #main-nav .mega-menu .sub-menu li:nth-of-type(5) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         display: block;
         padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
         margin: 0 0 20px 0;
       }
       #main-nav .mega-menu .sub-menu li:nth-of-type(6) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         display: block;
         padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
         margin: 0 0 20px 0;
       }
       #main-nav .mega-menu .sub-menu li:nth-of-type(7) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         display: block;
         padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
         margin: 0 0 20px 0;
       }
       #main-nav .mega-menu .sub-menu li:nth-of-type(8) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         display: block;
         padding-top: 56.25%; /* 16:9 image ratio. Use 75% for a 4:3 image ratio */
         margin: 0 0 20px 0;
       }
       ```
   
 * Each CSS rule stands for one menu item. Which item it is, is defined through 
   the number in the lines `#main-nav .mega-menu .sub-menu li:nth-of-type(1) a::
   before {` where the 1 stands for the menu item. You can change the image for 
   each menu item if you change the line with the background-image `background-image:
   url('https://i.hizliresim.com/rOZM4V.jpg');`.
 *  Thread Starter [gokh](https://wordpress.org/support/users/gokh/)
 * (@gokh)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9917594)
 * Hi,
 * Yes, very well ..
 * • The image is cropped. Is it possible to reduce the size instead?
    • How can
   I change the “padding-bottom/ padding-bottom” values of the Mega menu panel?
 * [https://i.hizliresim.com/3EYzO0.jpg](https://i.hizliresim.com/3EYzO0.jpg)
 * Thanks
 *  Theme Author [terrathemes](https://wordpress.org/support/users/terrathemes/)
 * (@terrathemes)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9917748)
 * Please try this code instead:
 *     ```
       #main-nav .mega-menu .sub-menu li:nth-of-type(1) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         background-size: cover;
         display: block;
         padding-top: 71.4%;
         margin: 0 0 20px 0;
       }
       #main-nav .mega-menu .sub-menu li:nth-of-type(2) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         background-size: cover;
         display: block;
         padding-top: 71.4%;
         margin: 0 0 20px 0;
       }
       #main-nav .mega-menu .sub-menu li:nth-of-type(3) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         background-size: cover;
         display: block;
         padding-top: 71.4%;
         margin: 0 0 20px 0;
       }
       #main-nav .mega-menu .sub-menu li:nth-of-type(4) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         background-size: cover;
         display: block;
         padding-top: 71.4%;
         margin: 0 0 20px 0;
       }
       #main-nav .mega-menu .sub-menu li:nth-of-type(5) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         background-size: cover;
         display: block;
         padding-top: 71.4%;
         margin: 0 0 20px 0;
       }
       #main-nav .mega-menu .sub-menu li:nth-of-type(6) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         background-size: cover;
         display: block;
         padding-top: 71.4%;
         margin: 0 0 20px 0;
       }
       #main-nav .mega-menu .sub-menu li:nth-of-type(7) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         background-size: cover;
         display: block;
         padding-top: 71.4%;
         margin: 0 0 20px 0;
       }
       #main-nav .mega-menu .sub-menu li:nth-of-type(8) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         background-size: cover;
         display: block;
         padding-top: 71.4%;
         margin: 0 0 20px 0;
       }
       ```
   
 * To reduce the padding on the bottom use:
 *     ```
       #main-nav .mega-menu .sub-menu {
         padding-bottom: 0;
       }
       ```
   
 *  Thread Starter [gokh](https://wordpress.org/support/users/gokh/)
 * (@gokh)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9918185)
 * Wooww.. çok iyi..
 * How to add images to mobile menu
 * Thanks
 *  Theme Author [terrathemes](https://wordpress.org/support/users/terrathemes/)
 * (@terrathemes)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9918290)
 * To add them to the mobile menu too add this rule to each block I provided before:
 * `#mobile-menu .mega-menu .sub-menu li:nth-of-type(1) a::before,`
 * so that it looks like that, for example for the first menu item:
 *     ```
       #mobile-menu .mega-menu .sub-menu li:nth-of-type(1) a::before,
       #main-nav .mega-menu .sub-menu li:nth-of-type(1) a::before {
         content: "";
         background-image: url('https://i.hizliresim.com/rOZM4V.jpg');
         background-size: cover;
         display: block;
         padding-top: 71.4%;
         margin: 0 0 20px 0;
       }
       ```
   
 *  Thread Starter [gokh](https://wordpress.org/support/users/gokh/)
 * (@gokh)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9918483)
 * All right, thank you ..
 *  Theme Author [terrathemes](https://wordpress.org/support/users/terrathemes/)
 * (@terrathemes)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9918577)
 * You’re welcome.

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Header (logo-menu) width’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/meteorite/2.5.2/screenshot.png)
 * Meteorite
 * [Support Threads](https://wordpress.org/support/theme/meteorite/)
 * [Active Topics](https://wordpress.org/support/theme/meteorite/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/meteorite/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/meteorite/reviews/)

 * 15 replies
 * 2 participants
 * Last reply from: [terrathemes](https://wordpress.org/support/users/terrathemes/)
 * Last activity: [8 years, 4 months ago](https://wordpress.org/support/topic/header-logo-menu-width/#post-9918577)
 * Status: resolved